ES6类的ES5实现源码

废话不多说，先看ES6转成ES5后的源码👀

ES6继承

class A{
    constructor(name){
        this.name = name;
    }
    sayA(){
        console.log(this.name,'sayA');
    }
    static privateA(){
        console.log(this,'A的私有属性');
    }
}
class B extends A{
    constructor(name,age){
        super(name);
        this.age = age;
    }
    sayB(){
        console.log(this.name,'sayB',this.age);
    }
}

let b = new B('名字',21);
b.sayA();
B.privateA();
console.log(b.name+b.age);

转成ES5后

"use strict";

function _inheritsLoose(subClass, superClass) { 
  subClass.prototype = Object.create(superClass.prototype); 
  subClass.prototype.constructor = subClass; 
  subClass.__proto__ = superClass; 
}//subClass.__proto__ = superClass;作为实例继承父类的私有属性。

var A = /*#__PURE__*/function () {
  function A(name) {
    this.name = name;
  }

  var _proto = A.prototype;

  _proto.sayA = function sayA() {
    console.log(this.name, 'sayA');
  };

  A.privateA = function privateA() {
    console.log(this, 'A的私有属性');
  };

  return A;
}();

var B = /*#__PURE__*/function (_A) {
  _inheritsLoose(B, _A);

  function B(name, age) {
    var _this;

    _this = _A.call(this, name) || this;
    _this.age = age;
    return _this;
  }

  var _proto2 = B.prototype;

  _proto2.sayB = function sayB() {
    console.log(this.name, 'sayB', this.age);
  };

  return B;
}(A);

var b = new B('名字', 21);
b.sayA();
B.privateA();
console.log(b.name + b.age);

解

我们都知道：ES6类的继承，是将父类的私有属性继承到自身私有属性；原型属性继承到原型上；但是呢？你知道父类的类属性方法会被继承吗？集成到哪里吗？，答：父类的类属性方法会被集成到子类的原型链上__proto__上。

• 从ES5源码中可以看到，私有方法是利用 call，将父类当成普通函数执行，并将this指向子类实现的；_this = _A.call(this, name) || this;
• 而原型方法继承是通过object.create();subClass.prototype = Object.create(superClass.prototype);
• 类的属性方法是通过将子类当成一个实例，让其__proto__指向父类来实现类属性方法的继承；subClass.__proto__ = superClass;;

图解

当整个过程完成继承后，子类B和父类A形成这样的关系，👀