继承行为在 ES5 与 ES6 中的区别详解

// 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.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle"color: #ff0000">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); // 调用父类的constructor(x, y)
  this.color = color;
 }

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




ES6 中的继承使用到了 extends 关键字，function 也变成了 class 关键字。class 的本质还是一个语法糖，这个大家都会脱口而出，但是在继承机制这里到底是如何做到的，我们看一下 babel 在此处是如何帮我们转译的，


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)); // 调用父类的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);




如上是经过babel转译后的代码，有几个关键点：
一、 _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对象的校验，必须是function 或者null，否则报错。其次完成以下事情：


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



二、 ColorPoint 构造函数中 _classCallCheck()， _possibleConstructorReturn()


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



主要是用来检测构造函数不能直接调用，必须是通过new的方式来调用。


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



调用父类的构造函数，初始化一些实例属性，并将this返回。使用该返回的this赋值给子类的this对象，子类通过这一步返回的this对象，再该基础之上在添加一些实例属性。
这就是最大的不同之处。如果不经历这一步，子类没有this对象，一旦操作一个不存在的this对象就会报错。
三、 _createClass()


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



最后一步完成原型属性与静态属性的挂载，如果是原型属性，挂在在Constructor上的prototype上，如果是静态属性或者静态方法，则挂在Constuctor 上。
总结


基础知识要打牢，不是为了面试，前期打不劳，后面很多事情就会变的模棱两可，别人问到的时候，就会是「可能」、「也许」。不积跬步何以至千里 ，加油。
参考链接


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


https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create


https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&code_lz=Q
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。