javascript面向对象之ES6中的类和继承

深碍√TFBOYSˉ_ 2022-12-06 01:20 148阅读 0赞

阮一峰 官网 类 基础必须要看

[https://es6.ruanyifeng.com/\#docs/class][https_es6.ruanyifeng.com_docs_class]

function HeroES5(name, skill) {
          this.name = name
          this.skill = skill
        }
        HeroES5.prototype.doSth = function () {
          console.log(`练习${this.skill}`);
        }
        HeroES5.prototype.sayName = function () {
          console.log(`我的名字是${this.name}`);
        }

### **class** ###

在ES6中引入了class（类）的概念，ES6中的class可以看做是一个语法糖，他的绝大部分功能ES5都可以做到，新的class写法是对象原型的写法更加清晰，更像面向对象编程的写法，将上面的demo用ES6来写

class HeroES6 {
          constructor(name, skill) {
            this.name = name
            this.skill = skill
          }
          doSth() {
            console.log(`练习${this.skill}`);
          }
          sayName() {
            console.log(`我的名字是${this.name}`);
          }
        }

我们分别观察一下他们的数据类型

console.log(typeof HeroES5);//=>function
        console.log(typeof HeroES6);//=>function

看来ES6中的class也是函数类型，既然是函数类型就一定有prototype  
我们分别观察一下他们的prototype

console.log(HeroES5.prototype);
        console.log(HeroES6.prototype);

JavaScript

Copy

[![《javascript面向对象之ES6中的类和继承》][javascript_ES6]][javascript_ES6_javascript_ES6]

> 构造函数中的prototype属性在ES6的“类”上继续存在，事实上，类的所有方法都定义在类的prototype属性上

我们通过类实例化一个对象

const hr = new HeroES6("黄蓉", "打狗棒")
        console.log(hr);

[![《javascript面向对象之ES6中的类和继承》][javascript_ES6 1]][javascript_ES6_javascript_ES6 1]  
上面的栗子中，name和skill是hr的自身属性，（因为定义在this变量上），doSth()和sayName(),是原型对象上的属性，（因为定义在HeroES6类上）  
还记得hasOwnProperty吗？回忆一下[关于javascript的Object. hasOwnProperty，看我就够了][javascript_Object. hasOwnProperty]  
Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

console.log(hr.hasOwnProperty('name')); //=>true
        console.log(hr.hasOwnProperty('skill')); //=>true
        console.log(hr.hasOwnProperty('doSth')); //=>false
        console.log(hr.hasOwnProperty('sayName')); //=>false

好，关于ES6中的class我们就说这么多，还有很多没有提及的，[可以参考这个链接][Link 1]

### class的继承 ###

如果ES5的继承让你头晕目眩，那么是时候研究一下ES6的继承了  
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。  
举一个

//定义一个类
        class HeroES6 {
          constructor(name, skill) {
            this.name = name
            this.skill = skill
          }
          doSth() {
            return `练习${this.skill}`
          }
          sayName() {
            return `我的名字是${this.name}`
          }
        }
    //定义一个类，继承了  HeroES6类  
        class Gj extends HeroES6 {
          constructor(name, skill,favourite) {
            super(name, skill, favourite)// 调用父类的 constructor(name, skill) 
            this.favourite = favourite
          }
          doSth() {
            return super.doSth() + this.favourite//调用父类的sayName() 
          }
        }
    
        const gj = new Gj('郭靖','降龙十八掌','吃饭')
        console.log(gj);
        console.log(gj.doSth())//=>练习降龙十八掌吃饭
        console.log(gj.sayName());//=>我的名字是郭靖

输出  
[![《javascript面向对象之ES6中的类和继承》][javascript_ES6 2]][javascript_ES6_javascript_ES6 2]  
我们先定义一个类HeroES6，我们可以称它为父类，  
我们又定义了一个Gj类，我们可以称它为子类，该类通过extends关键字，继承了HeroES6类的所有属性和方法

> **子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。**

如果子类没有定义constructor方法，这个方法会被默认添加，如果手动添加了constructor方法，就一定要调用super方法，否则新建实例时会报错，调用了super后才能使用this关键字

//部分代码省略
      class Gj extends HeroES6 {
          constructor(name, skill, favourite) {
            this.favourite = favourite//不能在super前调用this
            super(name, skill, favourite)
          }
          doSth() {
            return super.doSth() + this.favourite
          }
        }
    //部分代码省略

输出  
[![《javascript面向对象之ES6中的类和继承》][javascript_ES6 3]][javascript_ES6_javascript_ES6 3]

### super ###

关于super[阮一峰的ES6][ES6]说的很详细  
我们强调一点  
super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。  
子类Gj的构造函数之中的super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错。  
注意，super虽然代表了父类 HeroES6的构造函数，但是返回的是子类Gj的实例，即super内部的this指的是Gj  
ES6的继承使用方法地区简单方便

[https_es6.ruanyifeng.com_docs_class]: https://es6.ruanyifeng.com/#docs/class
[javascript_ES6]: https://img-service.csdnimg.cn/img_convert/9d4424366839aa81235e8b663234aac2.png
[javascript_ES6_javascript_ES6]: /images/20221123/65c44fd9ee2443868f78e2181bc911a0.png
[javascript_ES6 1]: https://img-service.csdnimg.cn/img_convert/ecba2f7ac516b896e75a882078158971.png
[javascript_ES6_javascript_ES6 1]: /images/20221123/2da1050ec02f4fb79f521054133aa0aa.png
[javascript_Object. hasOwnProperty]: https://www.qdtalk.com/2018/11/01/%E5%85%B3%E4%BA%8Ejavascript%E7%9A%84object-hasownproperty%EF%BC%8C%E7%9C%8B%E6%88%91%E5%B0%B1%E5%A4%9F%E4%BA%86/
[Link 1]: http://es6.ruanyifeng.com/#docs/class
[javascript_ES6 2]: https://img-service.csdnimg.cn/img_convert/1cd73ae5ee8cdae65a0c34171f564e04.png
[javascript_ES6_javascript_ES6 2]: /images/20221123/e80c0ea9e6c84c4a81fcdf9d885f0d54.png
[javascript_ES6 3]: https://img-service.csdnimg.cn/img_convert/7281ef8da06036571b8af3d6a08d3a29.png
[javascript_ES6_javascript_ES6 3]: /images/20221123/c971ebbed5d54e03947db7a511ad4823.png
[ES6]: http://es6.ruanyifeng.com/#docs/class-extends%23super-%E5%85%B3%E9%94%AE%E5%AD%97