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

心已赠人 2022-03-31 08:40 280阅读 0赞

先回忆下前两天我们写的继承方法

今天我们所讲的就是通过es6语法中class对以前写的继承做了优化，如果对class还不是很了解，可以看下[阮一峰class的继承][class]

# class #

新的class写法使对象原型的写法更加清晰，更像面向对象编程的写法，将上面的例子用ES6来写:

class PersonEs6(){ 
     constructor(name, hobby) { 
            this.name = name
            this.hobby = hobby
          }
          doSth(){ 
            console.log(`${ this.name}正在陪小仙女`)
          }
          sayHobby(){ 
            console.log(`我的兴趣是${ this.hobby}`)
          }
    }

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

function Person(name, hobby) { 
          this.name = name
          this.hobby = hobby
        }
        Person.prototype.doSth = function () { 
          console.log(`${ this.name}正在陪小仙女`);
        }
        Person.prototype.sayHobby= function () { 
          console.log(`我的兴趣是${ this.hobby}`);
        }
        
     class PersonEs6 { 
     constructor(name, hobby) { 
            this.name = name
            this.hobby = hobby
          }
          doSth(){ 
            console.log(`${ this.name}正在陪小仙女`)
          }
          sayHobby(){ 
            console.log(`我的兴趣是${ this.hobby}`)
          }
    }
    console.log(Person.prototype)
    console.log(PersonEs6.prototype)

输出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70]  
可以看出构造函数中的prototype属性在ES6的class上继续存在，事实上，类的所有方法都定义在类的prototype属性上  
我们通过类实例化一个对象

class PersonEs6 { 
    constructor(name,hobby) { 
    this.name = name;
    this.hobby = hobby
    }
    doSth() { 
    console.log(`${ this.name}正在陪小仙女`)
    }
    syaHobby() { 
    console.log(`我的名字是${ this.name}`)
    }
    }
    
    const LJJ = new PersonEs6("刘家军","敲代码")
    console.log(LJJ)

输出:  
![在这里插入图片描述][20190102183745114.png]

name和hobby是LJJ的自身属性，（因为定义在this变量上），doSth()和sayName(),是原型对象上的属性，（因为定义在PersonEs6类上）  
继续看代码测一下：

console.log(LJJ.hasOwnProperty('name')) // true
    console.log(LJJ.hasOwnProperty('hobby')) // true
    console.log(LJJ.hasOwnProperty('doSth')) .// false
    console.log(LJJ.hasOwnProperty('sayHobby')) // fasle

Object的hasOwnProperty()方法如果忘记了，可以看下我以前写JavaScript原型和原型链时关于Object的hasOwnProperty()方法的文章  
 class继承  
上面初步了解了下class，现在我们开始讲class的继承  
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多  
废话不多说,继续贴代码

class Person { 
    constructor(name,hobby) { 
    this.name = name;
    this.hobby = hobby
    }
    doSth() { 
    return `${ this.name}正在陪小仙女`
    }
    sayHobby() { 
    return `我的兴趣是${ this.hobby}`
    }
    }
    
    class Ljj extends Person { 
    constructor(name,hobby,privates){ 
    super(name,hobby)
    this.privates = privates
    }
    doSth(){ 
    return `${ this.privates}:${ super.doSth()}`
    }
    }
    
    const LJJ = new Ljj("刘家军","敲代码","私有的")
    console.log(LJJ)
    console.log(LJJ.doSth())
    console.log(LJJ.sayHobby())

输出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70 1]  
我们先定义了一个类Person， 我们把它称为父类，  
然后又定义了个类Ljj，我们 把它称为子类，该类通过extends关键字，继承了Person类的所有属性和方法

**如果子类没有定义constructor方法，这个方法会被默认添加，如果手动添加了constructor方法，就一定要调用super方法，否则新建实例时会报错，调用了super后才能使用this关键字**  
**子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。**  
关于super的具体用法具体看 [阮一峰super关键字][super]

友情链接：[点击查看所有文章目录][Link 1]

友情链接：[点击查看　JavaScript面向对象系列文章目录][JavaScript]

[class]: http://es6.ruanyifeng.com/#docs/class-extends
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70]: /images/20220331/49b59d7fdcc9476e83bc6ea612b5c93a.png
[20190102183745114.png]: /images/20220331/5f44dbbac2a9414ea700cb3f595e25b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70 1]: /images/20220331/5e0b2f68974a40329297bb772cebdd45.png
[super]: http://es6.ruanyifeng.com/#docs/class-extends#super-%E5%85%B3%E9%94%AE%E5%AD%97
[Link 1]: https://blog.csdn.net/qq_42911663/article/details/86365901
[JavaScript]: https://blog.csdn.net/qq_42911663/article/details/86367564