你不知道的ES5和ES6继承

   ES5继承和ES6继承的区别,在ES6还没有发布的时候 ,js定义类是以函数的形式,例如

function TestFather() {
this.aa = 'aa';
}
TestFather.prototype.getAA = function() {
return this.aa
}

   而ES6 已经可以用关键class来定义个类 例如

class TestFather {
constructor() {
this.aa = 'aa';
}
getAA() {
return this.aa;
}
}
let father = new TestFather();
father.getAA();

ES5中构造函数是function函数本身 而 ES6中构造函数 是constructor 函数,类似与java
接下来谈一下ES5继承和ES6继承
ES5继承是

function AA () {
this.aa = 'aa'
}
AA.prototype.getAA = function() {
console.log(this)
return this.aa
}
function BB() {
AA.call(this)
}
BB.prototype = new AA()
BB.prototype.constructor = BB
let bb = new BB()
bb.getAA() // log BB { aa: 'aa' }

而ES6的中继承

class AA {
constructor() {
this.aa = 'aa'
}
getAA() {
console.log(this)
return this.aa
}
}
class BB extends AA {
constructor() {
super()
}
}
let bb = new BB() // log BB { aa: 'aa' }
bb.getAA()

    ES6中子类继承父类的属性使用了super关键字,ES6语法实现是ES5的语法糖,表面上 ES6的类关键字和子类继承关键字 实现的结构和ES5继承一样 但是根本还是有差别的 其中ES5继承prototype属性是先实例化父类 直接继承 而 ES6实在实例化子类对象时继承父类prototype,即实例化父类。
原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 3,178评论 1 2
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,881评论 2 17
  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 4,129评论 3 11
  • 选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaS...
    George_Wm阅读 1,561评论 0 0
  • 三月的午后,本应该比以往的更温暖的,但YY却略感寒意。两个合租的人是怎样也不会有感情的,YY一直是否定的,因为她打...
    carefreeyuan阅读 424评论 1 0