ES5与ES6中继承行为的区别有哪些

  介绍

这篇文章将为大家详细讲解有关ES5与ES6中继承行为的区别有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强> ES5中的继承

//, Shape 作用;父类(超类)   function 形状(),{=,this.x  0;=,this.y  0;   }//,父类的方法   时间=Shape.prototype.move 函数(x, y), {   +=,this.x  x;   +=,this.y  y;   ,console.info (& # 39; Shape 强生# 39;移动);   };//,Rectangle 神子类(子类)   function 矩形(),{   ,Shape.call(这);,//,call  super 构造函数。   }//,子类续承父类   时间=Rectangle.prototype  Object.create (Shape.prototype);   时间=Rectangle.prototype.constructor 矩形;      var  rect =, new 矩形();      console.log (& # 39; Is  rect  an  instance  of 矩形? & # 39;,   ,rect  instanceof 矩形);//,真的   console.log (& # 39; Is  rect  an  instance  of 形状? & # 39;,   ,rect  instanceof 形状);//,真的   rect.move(1, 1),,//,输出,,& # 39;Shape 移动强生# 39;

如上所示:展示了一个ES5中实现单继承的例子,在《Javascript高级程序设计》一书中,给这种继承方式定义为“寄生组合式继承”。不管什么形式,什么命名,在ES5中实现继承始终就是要坚持一个原则:将实例属性放在构造函数中挂在这上,将一些方法属性挂在原型对象上,子类可共享。上面这种继承方式的关键在于两点:

<李>

子类构造函数通过申请或电话者的方式运行父类的构造函数,此举将父类的实例属性挂在子类的这对象上

<李>

以父类的原型对象为基础,与子类的原型对象之间建立原型链关系,使用了对象。创建、本质在于Child.prototype。__proto===Parent.prototype;

<强> ES6中的继承

class  Point  {   ,构造函数(x, y), {   this.x 才能=,x;   this.y 才能=,y;   ,}      ,toString () {   return 才能;& # 39;(& # 39;,+,this.x  +, & # 39;,, & # 39;, +, this.y  +, & # 39;) & # 39;;   ,}   }      class  ColorPoint  extends  Point  {   ,构造函数(x, y,,颜色),{   超级才能(x, y);,//,调用父类的构造函数(x, y)   时间=this.color 才能;颜色;   ,}      ,toString () {   return 才能;this.color  +, & # 39;, & # 39;, +, super.toString (),,   ,}   }

ES6中的继承使用到了扩展关键字,功能也变成了类关键字. class的本质还是一个语法糖,这个大家都会脱口而出,但是在继承机制这里到底是如何做到的,我们看一下巴别塔在此处是如何帮我们转译的,

var  ColorPoint =/* # __PURE__ */function  (_Point), {   ,_inherits (ColorPoint, _Point);      ,function  ColorPoint (x, y,,颜色),{   var 才能;_this;      _classCallCheck才能(,,ColorPoint);      _this 才能=,_possibleConstructorReturn (,, _getPrototypeOf (ColorPoint)打电话给(这个,,x,, y)),,//,调用父类的构造函数(x, y)      时间=_this.color 才能;颜色;   return 才能;_this;   ,}      ,_createClass (ColorPoint, [{   ,,关键:“toString",   ,,值:function  toString (), {   ,,return  this.color  +, & # 39;, & # 39;, +, get (_getPrototypeOf (ColorPoint.prototype),“toString",,)打电话给(这个);   ,,}   ,}]);      ,return  ColorPoint;   }(点);

如上是经过巴别塔转译后的代码,有几个关键点:

一、_inherits ()

function  _inherits(子类,超类),{   if 才能;(typeof  superClass  !==,“function",,,, superClass  !==, null), {   ,,,throw  new  TypeError (“Super  expression  must  either  be  null 或是a  function");   ,,}   subClass.prototype 才能=,Object.create (superClass ,,, superClass.prototype,, {   构造函数:,,,,{   ,,,,,的值:,子类,   ,,,,,可写:,真的,   ,,,,,可配置:真实   ,,,}   ,,});   if 才能;(父类),_setPrototypeOf(子类,超类);   }

首先完成扩展对象的校验,必须是函数或者null,否则报错。其次完成以下事情:

ColorPoint.__proto__ ===,点;   ColorPoint.prototype.__proto__ ===, Point.prototype;

二,ColorPoint构造函数中_classCallCheck (), _possibleConstructorReturn ()

ES5与ES6中继承行为的区别有哪些