码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript继承

时间:2021-02-17 15:13:19      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:传参   es5   com   log   rgb   ble   har   charset   end   

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
  // ES5继承:
  // function Dad(height) {
  //   this.name = "小明";
  //   this.age = 52;
  //   this.height = height;
  // }

  // function Son(height) {
  //   Dad.call(this, height);
  //   // Dad.apply(this, [height]);
  //   // Dad.bind(this, height)();
  // }

  // let newSon = new Son("178cm");
  // console.log(newSon);
  
  // ES6继承:
  class Dad {
    static num = 10;
    constructor(height) {
      this.name = "小明";
      this.age = 52;
      this.height = height;
    }
    fn() {
      console.log("Dad fn...");
    } //公共方法
  }

  class Son extends Dad {
    constructor(height) {
      super(height); //相当于调取Dad的constructor,把height传入Dad
      // super要放在this之前
      this.hobby = "篮球";
    } //用constructor传参、定义属性
    fn() {
      super.fn(); //调取父类fn方法
      console.log("Son fn...");
    } //公共方法
  }

  console.log(Son.num);
  let newSon = new Son("178cm");
  console.log(newSon);
  newSon.fn(); 
  
  // 运行结果:
  // 10
  // Son
  // Dad fn...
  // Son fn...
</script>
</html>

 

JavaScript继承

标签:传参   es5   com   log   rgb   ble   har   charset   end   

原文地址:https://www.cnblogs.com/starlog/p/14403589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!