ES5与ES6的继承

ES5的继承

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

原型是一个对象,并且创建的每一个都会自动获取一个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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 9,551评论 3 11
  • 本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及...
    lazydu阅读 16,774评论 7 44
  • 在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中...
    Daguo阅读 26,005评论 10 44
  • 面向对象的语言都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象,ES6之前并没有类的概念,在ES6中引...
    Erric_Zhang阅读 4,819评论 1 4
  • 声声巨响震云天,五彩花开缤纷颜。 佳节喜庆燃放它,祝福快乐满心间。
    文采乐阅读 1,099评论 0 8

友情链接更多精彩内容