一、class

es6加入的class其实是为了开发者方便创建类，与其他语言在写法上尽量一致，但是js原生并没有类这个东西，为了实现类的效果，可以通过js的构造器来实现，class使用new关键字生成实例，构造器也是通过new来实例化，那么可以推断class本质也是个构造器

  1. const Class = (function(){
  2.     function Constructor(name){
  3.       this.name = name
  4.   }
  6.   Constructor.prototype.getName = function getName(){
  7.   }
  9.   Constructor.prototype.age = '18'
  11.   Constructor.log = function log(){
  12.   }
  14.   Constructor.isWho = 'iswho'
  16.   return Constructor
  17. })()
  19. const item = new Class('leon')

实现class语法糖，只需封装一层函数。

  • 返回的Constructor就是实例的构造器，其prototype是个空白的对象这是由于Function造成的
  • new后面调用的函数必须是一个构造器函数，用于构造实例，此构造器的this指向实例
  • 构造器内部需要实现依照传入的参数设置实例的属性
  • 定义Class时需要实现原型属性和静态属性的挂载

**

二、实现extends

  • 继承需要满足原型的继承
  • 还需要满足可调用父类构造器
  1. //父类
  2. const Parent = (function () {
  3.   function Constructor(age) {
  4.     this.age = age
  5.   }
  6.   Constructor.prototype.getName = function () {
  7.     console.log(this.name);
  8.   }
  9.   return Constructor
  10. })()
  11. //子类
  12. const Class = (function (_Parent = null) {
  13.   if (_Parent) {
  14.     Constructor.prototype = Object.create(_Parent.prototype, {
  15.       constructor: {
  16.         value: Constructor,
  17.         enumerable: false,
  18.         writable: true,
  19.         configurable: true
  20.       }
  21.     })
  22.     Constructor.__proto__ = _Parent
  23.   }
  24.   function Constructor(name, age) {
  25.     _Parent ? _Parent.call(this, age) : this
  26.     this.name = name
  27.   }
  28.   Constructor.prototype.getAge = function () {
  29.     console.log(this.age);
  30.   }
  31.   return Constructor
  32. })(Parent)
  • 实现原型继承，可以使用之前的继承写法，注意class形式的继承，会把父类设为子类的__proto__
  • 在构造函数内判断是否有父类，如果有就要调用父类的构造函数，把当前的this传入，这样才能生成父类构造器中定义的属性，这才算是真正的继承。继承不单继承原型还能实现继承父类构造器中定义的属性
  • 对于原型方法和静态方法也是类似定义，注意定义的方法如果用到this需要使用function关键字定义函数，不可使用匿名函数，否则this无法指向调用对象本身

————————————————————————————————————————-[引用来源] https://juejin.im/post/6844904136161361933