实现 ES6 的 extends

一、ES6 继承

通过 ES6 语法很容易实现继承，如下代码所示：

class B{
   constructor(name){
     this.name = name;
   }
};
class A extends B{
    constructor(name,age){
     super(name)
     this.age = age;
   }
};
let a = new A('wxp',18);
console.log(a)//{name:'wxp',age:18}

二、ES6 继承解析

大致讲解一下以上代码：

1.关键字 class 是 ES6 中实现类的主要语法，与 ES5 的对比如下：

//ES6
class B{
  constructor(name){
    this.name = name;
  }
}
//等同于ES5
function B(name){
   this.name = name;
}

说明：ES6 的类主要是通过 constructor 来实现构造函数的，如果不用 constructor 写成 class B{name = 'wxp'}也是可以的,但是这样就没法传参，所以可以理解为 constructor 的作用主要是用来供实例对象传参的。

2.以上 A 类在实现 B 类的函数体内除了 constructor 还有个 super 的调用，这个 super 的调用主要用来执行 B 类，也就是父类的构造函数。因为 A 类继承 B 类，所以必将会用到 B 类的属性或方法，如果 B 类也需要传参，那么 super 就提供了一个传参入口。

三、用 ES5 实现extends

function B(name){
  this.name = name;
};
function A(name,age){
  //1.将A的原型指向B
  _extends(A,B);
  //2.用A的实例作为this调用B,得到继承B之后的实例，这一步相当于调用super
  getPrototypeOf(A).call(this, name)
  //3.将A原有的属性添加到新实例上
  this.age = age; 
  //4.返回新实例对象
  return this;
};
function _extends(A,B){
   A.prototype.__proto__= B.prototype;
   A.prototype.constructor = A;
   Object.setPrototypeOf(A,B);
};
var a = new A('wxp',18);
console.log(a);{name:'wxp',age:18}

四、彩蛋

Babel（https://www.babeljs.cn/）可以实现 ES6 和 ES5 的在线转换，打开网址，点击试一试。