ES5与ES6的继承

ES5的继承
ES5的继承是通过原型来实现的。

【ES5与ES6的继承】原型是一个对象,并且创建的每一个都会自动获取一个Prototypes属性,该属性指向一个新的空对象,该对象几乎等同于采用对象字面量或Object()创建的对象,区别在于它的constructor属性指向了所创建的函数,而不是指向内置的Object()函数。可以为该空对象增加成员变量,以后其他对象也可以从该对象继承并像使用自己的属性一样使用该对象。-----《JavaScript模式》
//构造函数方式 function Animal { this.name = 'pig' } function Animal2 { Animal.call(this); this.age = 18 } console.log(new Animal2()) //缺点:无法继承Animal的原型对象//原型链方式 function Animal { this.name = 'pig' } function Animal2 { this.age = 18 } Animal2.prototype = new Animal(); console.log(new Animal2()) //缺点:实际上是共享,修改原型对象里的内容,其它继承的类也会同步修改//组合方式 function Animal { this.name = 'pig' } function Animal2 { Animal.call(this); this.age = 18 } Animal2.prototype = Animal.prototype; console.log(new Animal2()) //缺点:由于引用同一个原型对象,无法区分对象是由谁实例化的//最终方式 function Animal { this.name = 'pig' } function Animal2 { Animal.call(this); this.age = 18 } Animal2.prototype = Obiect.create(Animal.prototype); Animal2.prototype.constructor = Animal2; console.log(new Animal2()) //解释:通过创建新的对象,不再是同一个,再指定构造函数属性为自己

ES6的继承
ES6的class可以通过extends关键字实现继承
class Point{ } class ColorPoint extends Point{ constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } }

注意:子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
ES5继承的实质是先创建子类的实例对象this,然后将父类的方法添加到this上面。
ES6的继承机制完全不同,实质是先创造父类的实例对象this(所以必须先调用super方法),然后在用子类的构造函数修改this。

    推荐阅读