ES5與ES6中繼承行為的區(qū)別有哪些

這篇文章將為大家詳細(xì)講解有關(guān) ES5 與 ES6 中繼承行為的區(qū)別有哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

在隨縣等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需搭建網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,成都營(yíng)銷網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè)公司,隨縣網(wǎng)站建設(shè)費(fèi)用合理。

ES5 中的繼承

// Shape - 父類(superclass)
function Shape() {
 this.x = 0;
 this.y = 0;
}

// 父類的方法
Shape.prototype.move = function(x, y) {
 this.x += x;
 this.y += y;
 console.info('Shape moved.');
};

// Rectangle - 子類(subclass)
function Rectangle() {
 Shape.call(this); // call super constructor.
}

// 子類續(xù)承父類
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
 rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
 rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

如上所示：展示了一個(gè) ES5 中實(shí)現(xiàn)單繼承的例子，在《Javascript 高級(jí)程序設(shè)計(jì)》一書中，給這種繼承方式定義為「寄生組合式繼承」。不管什么形式，什么命名，在 ES5 中實(shí)現(xiàn)繼承始終就是要堅(jiān)持一個(gè)原則：將實(shí)例屬性放在構(gòu)造函數(shù)中掛在this上，將一些方法屬性掛在原型對(duì)象上，子類可共享。上面這種繼承方式的關(guān)鍵在于兩點(diǎn)：

子類構(gòu)造函數(shù)通過 apply 或者 call 的方式運(yùn)行父類的構(gòu)造函數(shù)，此舉將父類的實(shí)例屬性掛在子類的 this 對(duì)象上
以父類的原型對(duì)象為基礎(chǔ)，與子類的原型對(duì)象之間建立原型鏈關(guān)系，使用了 Object.create，本質(zhì)在于 Child.prototype.__proto === Parent.prototype;

ES6 中的繼承

class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }

 toString() {
  return '(' + this.x + ', ' + this.y + ')';
 }
}

class ColorPoint extends Point {
 constructor(x, y, color) {
  super(x, y); // 調(diào)用父類的constructor(x, y)
  this.color = color;
 }

 toString() {
  return this.color + ' ' + super.toString(); 
 }
}

ES6 中的繼承使用到了 extends 關(guān)鍵字，function 也變成了 class 關(guān)鍵字。class 的本質(zhì)還是一個(gè)語法糖，這個(gè)大家都會(huì)脫口而出，但是在繼承機(jī)制這里到底是如何做到的，我們看一下 babel 在此處是如何幫我們轉(zhuǎn)譯的，

var ColorPoint =
/*#__PURE__*/
function (_Point) {
 _inherits(ColorPoint, _Point);

 function ColorPoint(x, y, color) {
  var _this;

  _classCallCheck(this, ColorPoint);

  _this = _possibleConstructorReturn(this, _getPrototypeOf(ColorPoint).call(this, x, y)); // 調(diào)用父類的constructor(x, y)

  _this.color = color;
  return _this;
 }

 _createClass(ColorPoint, [{
  key: "toString",
  value: function toString() {
   return this.color + ' ' + _get(_getPrototypeOf(ColorPoint.prototype), "toString", this).call(this);
  }
 }]);

 return ColorPoint;
}(Point);

如上是經(jīng)過babel轉(zhuǎn)譯后的代碼，有幾個(gè)關(guān)鍵點(diǎn)：

一、 _inherits()

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

首先完成extends對(duì)象的校驗(yàn)，必須是function 或者null，否則報(bào)錯(cuò)。其次完成以下事情：

ColorPoint.__proto__ === Point;
ColorPoint.prototype.__proto__ === Point.prototype;

二、 ColorPoint 構(gòu)造函數(shù)中 _classCallCheck()， _possibleConstructorReturn()

function _classCallCheck(instance, Constructor) {
 if (!_instanceof(instance, Constructor)) {
   throw new TypeError("Cannot call a class as a function");
 }
}

主要是用來檢測(cè)構(gòu)造函數(shù)不能直接調(diào)用，必須是通過new的方式來調(diào)用。

function _possibleConstructorReturn(self, call) {
 if (call && (_typeof(call) === "object" || typeof call === "function")) {
   return call;
 }
 return _assertThisInitialized(self);
}

調(diào)用父類的構(gòu)造函數(shù)，初始化一些實(shí)例屬性，并將this返回。使用該返回的this賦值給子類的this對(duì)象，子類通過這一步返回的this對(duì)象，再該基礎(chǔ)之上在添加一些實(shí)例屬性。

這就是最大的不同之處。如果不經(jīng)歷這一步，子類沒有this對(duì)象，一旦操作一個(gè)不存在的this對(duì)象就會(huì)報(bào)錯(cuò)。

三、 _createClass()

function _createClass(Constructor, protoProps, staticProps) {
 if (protoProps) _defineProperties(Constructor.prototype, protoProps);
 if (staticProps) _defineProperties(Constructor, staticProps);
 return Constructor;
}

關(guān)于 ES5 與 ES6 中繼承行為的區(qū)別有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文名稱：ES5與ES6中繼承行為的區(qū)別有哪些
分享路徑：http://muchs.cn/article18/jcjhdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、軟件開發(fā)、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、全網(wǎng)營(yíng)銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容