实现 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 的在线转换,打开网址,点击试一试。

猜你喜欢

转载自blog.csdn.net/weixin_44135121/article/details/89262798