es5 与 es6 继承区别

一、不同

function Super(){}

function Sub(){}

Sub.prototype = new Super()

Sub.prototype.constructor = Sub; // 为什么?为了 console.log(Sub.prototype.constructor)//[Function: Sub] ?

const subInstance = new Sub()

// es5 一个继承链

console.log(Sub.prototype.constructor)//[Function: Sub]

console.log(Super.prototype.constructor)//[Function: Super]

console.log( subInstance instanceof Sub) // true

console.log( subInstance instanceof Super) // true



class Point {

}

class ColorPoint extends Point {

  constructor() { super() }

}

const cpInstance = new ColorPoint()

// ES6 两条继承链

console.log(ColorPoint.__proto__ === Point) // true

console.log(ColorPoint.prototype.__proto__ === Point.prototype) // true

console.log( cpInstance instanceof ColorPoint) // true

console.log( cpInstance instanceof Point) // true


二、注意

super  的使用

第一种情况,super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数。

classA{}

classB extends A{

constructor(){super();}

}

super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.constructor.call(this)。

第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。


参考

https://segmentfault.com/a/1190000013105095

http://es6.ruanyifeng.com/#docs/class-extends


以下转载自http://keenwon.com/1524.html


ES5

ES5中的继承,看图:


function Super() {}


function Sub() {}

Sub.prototype = new Super();

Sub.prototype.constructor = Sub;

var sub = new Sub();

Sub.prototype.constructor === Sub; // ② true

sub.constructor === Sub; // ④ true

sub.__proto__ === Sub.prototype; // ⑤ true

Sub.prototype.__proto__ == Super.prototype; // ⑦ true

ES5中这种最简单的继承,实质上就是将子类的原型设置为父类的实例。

ES6

ES6中的继承,看图:


class Super {}

class Sub extends Super {}

var sub = new Sub();

Sub.prototype.constructor === Sub; // ② true

sub.constructor === Sub; // ④ true

sub.__proto__ === Sub.prototype; // ⑤ true

Sub.__proto__ === Super; // ⑥ true

Sub.prototype.__proto__ === Super.prototype; // ⑦ true

所以

ES6和ES5的继承是一模一样的,只是多了class 和extends ,ES6的子类和父类,子类原型和父类原型,通过__proto__ 连接。

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

推荐阅读更多精彩内容

  • 继承是面向对象中一个比较核心的概念。其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承。而EC...
    lovelydong阅读 2,905评论 0 2
  • 关于js中的继承,已经老生常谈了,本文将对js的继承做一个大概的总结. 首先我们可以看一下,es5继承关系图,理解...
    我的昵称是小狼阅读 5,234评论 0 2
  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 8,343评论 1 2
  • ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manu...
    fastwe阅读 4,949评论 0 2
  • 科多大数据小课堂:数据分析学习之商品分析定义 商品分析的主要数据来自销售数据和商品基础数据,从而产生以分析结构为主...
    大数据在说话阅读 5,932评论 0 12