介绍
这篇文章将为大家详细讲解有关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 ()