细读 ES6 | Class 下篇

作者: 越前君 | 来源:发表于2021-07-30 18:29 被阅读0次

配图源自 Freepik

继上一篇介绍了 Class 的语法，今天来看看 ES6 中的继承。

在 ES5 大概有 6 种继承方式：类式继承、构造函数继承、组合式继承、原型继承、寄生式继承、寄生组合式继承，而这些方式都有一些各自的缺点，可看文章：深入 JavaScript 继承原理。

而 ES6 标准提供了 Class（类）的语法来定义类，语法很像传统的面向对象写法。本质上仍然是通过原型实现继承的，可以理解为 class 只是一个语法糖，跟传统面向对象的类又不一样。废话说完了，入正题...

那 Class 是怎样实现继承的呢？

一、简介

通过 extends 关键字实现继承，比 ES5 写一长串的原型链，方便清晰很多，对吧。

class Person {}

class Student extends Person {} // 没错，这样就实现了继承

上面的示例中，定义了一个 Student（子）类，该类通过 extends 关键字继承了 Person（父）类的所有属性和方法。但由于两个类中并没有实现什么功能，相当于 Student 复制了一个 Person 类而已。

需要注意的是，若子类自实现了 constructor 方法，需在其内部使用 super 关键字来调用父类的构造方法，否则当子类进行实例化时会报错。

class Person {}

class Student extends Person {
  constructor() {
    super()
    // 相当于调用父类 Person 的构造方法，
    // 相当于 Person.prototype.constructor.call(this)，
    // 而且，若 constructor 内使用了 this 关键字，
    // super() 一定要在 this 之前进行调用，否则会报错。
  }
}

const stu = new Student() // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

// 至于为什么上一个示例，实例化时并不会报错，原因如下：
// 当 constructor 缺省时，JS 引擎会默认添加一个 constructor 方法，相当于：
// 
// class Person {}
// class Student extends Person {
//   constructor(...args) {
//     super(...args)
//   }
// }

原因是，ES5 的继承实质是先创建子类的实例对象（即 this），然后再将父类的方法添加到实例对象 this 上（类似 Parent.apply(this)）。而 ES6 继承机制完全不同，它先将父类的实例对象的属性和方法，放到 this 上，然后再用子类的构造函数修改 this。因此，在子类使用 this 之前，需要调用 super() 方法执行父类的 constructor() 方法来创建实例对象 this。

我们来改下：

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  sayHi() {
    console.log(`Hi, my name is ${this.name}.`)
  }
}

class Student extends Person {
  constructor(name, age, stuNo) {
    super(name, age)
    this.stuNo = stuNo // this 只能在调用 super() 后使用
  }
}

const stu = new Student('Frankie', 20, 2021001)
stu.sayHi() // "Hi, my name is Frankie."

实例对象 stu 同时是 Student、Person 类的实例，这点与 ES5 表现一致。

stu instanceof Student // true
stu instanceof Person // true

二、Object.getPrototypeOf()

使用 Object.getPrototypeOf() 可以通过子类获取其直接父类。

Object.getPrototypeOf(stu) === Student // true
Object.getPrototypeOf(Student) === Person // true

// 也可以使用非标准的 __proto__ 访问原型
stu.__proto__.constructor === Student // true
stu.__proto__ === Student.prototype // true

提一下，我们一直使用的 Object.prototype.__proto__ 并不是 ECMAScript 标准，只是被各大浏览器厂商支持，因此我们才可以使用。现在被推荐使用的是，标准支持的 Objec.getPrototypeOf()、Object.setPrototypeOf() 方法。

三、super 关键字

关键字 super 可以作为函数使用，也可以作为对象使用，两种是有区别的。

1. super 作为函数

当 super 作为函数，只能在（子类）构造方法中使用，若在非子类或类的其他方法中调用，是会报错的。

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    console.log(new.target.name)
    // super() // 若在此调用，会报错：SyntaxError: 'super' keyword unexpected here
  }

  sayHi() {
    console.log(`Hi, my name is ${this.name}.`)
  }
}

class Student extends Person {
  constructor(name, age, stuNo) {
    // super(name, age)
    console.log(super(name, age) === this) // true
    this.stuNo = stuNo // this 只能在调用 super() 后使用
  }

  getStuNo() {
    // super() // 若在此调用，会报错：SyntaxError: 'super' keyword unexpected here
    return this.stuNo
  }
}

const stu = new Student('Frankie', 20, 2021001) // 打印："Student"
const person = new Person('Mandy', 18) // 打印："Person"

在构造方法当作函数调用 super()，它代表了父类的构造方法。根据 ES6 规定，子类的构造函数必须执行一次 super 函数。当缺省 constructor() 方法时，JS 引擎会帮我们添加一个默认构造方法，里面也包括 super() 的调用。

小结：

super() 只能在子类的 constructor() 方法内调用，在 getStuNo() 方法内调用会报错。例如，示例中父类 Person 并没有继承自其他类，因此在父类 Person 的 constructor() 方法内调用是会报错的。
调用 super() 返回当前实例化对象，即 this。
new.target 指向直接被 new 执行的类。因此通过 new Student() 和 new Person() 进行实例化时，new.target 分别指向 Student 类和 Person 类。

2. super 作为对象

当 super 作为对象使用时，在普通方法内（包括 constructor() 在内的非静态方法），它指向父类的原型对象（即 Parent.prototype）；而在静态方法内，它指向父类（即 Parent）。

// 父类
class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  sayHi() {
    console.log(`Hi, my name is ${this.name}.`)
  }

  printAge() {
    console.log(this.age)
  }

  static classMethodParent() {
    console.log(Person.name)
  }
}

Object.assign(Person.prototype, {
  prop: 'hhh'
})

// 子类
class Student extends Person {
  constructor(name, age, stuNo) {
    super(name, age)
    this.stuNo = stuNo

    // 作为对象 super 相当于 Person.prototype
    super.sayHi() // "Hi, my name is Frankie."
    console.log(super.name) // undefined
    console.log(super.prop) // "hhh"
  
    // 另外，要注意：
    super.tmp = 'temporary' // 相当于 this.tmp = 'temporary'
    console.log(super.tmp) // undefined
    console.log(this.tmp) // "temporary"
  }

  getStuNo() {
    return this.stuNo
  }

  getAge() {
    // 普通方法内，super 指向父类的原型对象，
    // 即相当于 Person.prototype.printAge.call(this)
    super.printAge()
  }

  static classMethod() {
    // 静态方法内，super 指向父类
    // 相当于 Person.classMethodParent()
    super.classMethodParent()
  }
}

const stu = new Student('Frankie', 20, 2021001)
stu.getAge() // 20
Student.classMethod() // "Person"

小结：

在普通方法内，类似 super.xxx 等取值操作，super 均指向父类的原型对象。例如，上述子类构造方法内 super.name 打印结果为 undefined，原因是属性 name 是挂载到实例对象上的，而不是实例的原型对象上的。即 super.name 相当于 Person.prototype.name。
在普通方法内，类似 super.xxx = 'xxx' 等赋值操作，相当于 this.xxx = 'xxx'，因此属性 xxx 会被挂载到实例对象上，而不是父类原型对象。
普通方法内，通过 super.xxx() 调用父类方法，相当于 Person.prototype.xxx.call(this)。
在静态方法内，super 指向父类，因此 super.xxx() 相当于 Person.classMethodParent()。

以上提到的普通方法，是指非静态方法。

3. 注意事项

无论 super 是作为函数，还是对象使用，必须明确指定，否则会报错。

class Person {}

class Student extends Person {
  constructor() {
    super()
    console.log(super) // SyntaxError: 'super' keyword unexpected here
  }
}

4. 关于 super 总结

作为函数时，仅可在子类的 constructor() 内使用。若 constructor() 内包括 this 的使用，则 super() 必须在 this 之前进行调用。
作为对象时，若在非静态方法内使用，super.xxx（super.xxx()）相当于 Parent.prototype.xxx（Parent.prototype.xxx.call(this)）。
作为对象时，若在静态方法内使用，super.xxx（super.xxx()）相当于 Parent.xxx（Parent.xxx()）。
我们都知道在 JavaScript 访问对象的某个属性（或方法），先从对象本身去查找是否有此属性，再从原型上一层一层的查找，若最终查找不到会返回 undefined（或抛出 TypeError 错误）。

同样地，在 Class 继承中，若子类、父类存在同名方法，使用实例对象进行调用该方法，若子类查找到了，自然不会再去父类中查找。但我们在设计类的时候，可能仍需要执行父类的同名方法，那么怎么调用呢？

显然通过 父类名.方法名() 的方式调用是不合理、不灵活的，道理就跟 JavaScript 要设计 this 关键字一样。于是 super 就诞生了（最后这句是我猜的，哈哈）。

四、类的 prototype 属性和 proto 属性

在 ES5 之中，每个对象都有 __proto__ 属性，它指向对象的构造函数的 prototype 属性。

关于对象可分为：普通对象和函数对象，区别如下：

对象类型	prototype（原型对象）	__proto__（原型）
普通对象	❌	✅
函数对象	✅	✅

所有对象都有 __proto__ 属性，而只有函数对象才具有 prototype 属性。其中构造函数属于函数对象，而实例对象则属于普通对象，因此实例对象是没有 prototype 属性的。

而 ES6 的 class 作为构造函数的语法糖，同时有 prototype 属性和 __proto__，因此同时存在两条继承链。

子类的 __proto__ 属性，表示构造函数的继承，总是指向父类。
子类的 prototype 属性的 __proto__ 属性，表示方法的继承，总是指向父类的 prototype 属性。

class Person { }

class Student extends Person { }

Student.__proto__ === Person // true
Student.prototype.__proto__ === Student.prototype // true

上面的示例中，子类 Student 的 __proto__ 指向父类 Person，子类的 Student 的 prototype 属性的 __proto__ 属性指向父类 Person 的 prototype 属性。

因为类的继承，是按照以下模式实现的：

class Person { }
class Student extends Person { }

// 相当于
class Person { }
class Student { }
Object.setPrototypeOf(Student, Person)
Object.setPrototypeOf(Student.prototype, Person.prototype)

// -------------------------------------------------------
// 关于 Object.setPrototypeOf() 内部是这样实现的：
// Object.setPrototypeOf = functon(obj, proto) {
//   obj.__proto__ = proto
//   return obj
// }
//
// 因此，相当于：
// Student.__proto__ = Person
// Student.prototype.__proto__ = Person.prototype
// -------------------------------------------------------

这样去理解：

作为一个对象，子类 Student 的原型（__proto__）是父类 Person；
作为一个构造函数，子类 Student 的原型对象（prototype）是父类 Person 的原型对象（prototype）的实例。

因此，理论上 extends 关键字后面的（函数）对象，只要含有 prototype 属性就可以了，但 Function.prototype 除外。但在做项目的时候应该从实际应用场景考虑，这样去做是否有意义。

// 1. Student 类继承 Object 类
class Student extends Object { }
Student.__proto__ === Object // true
Student.prototype.__proto__ === Object.prototype // true

// 2. Student 不继承
class Student { }
Student.__proto__ === Function.prototype
Student.prototype.__proto__ === Object.prototype
// 因此，相当于：
// Object.setPrototypeOf(Student, Function.prototype)
// Object.setPrototypeOf(Student.prototype, Object.prototype)

五、Mixin 模式的实现

Mixin 指的是多个对象合成一个新的对象，新对象具备各个组成成员的接口。它的最简单实现如下：

const a = { a: 1 }
const b = { b: 2 }
const c = { ...a, ...b }

上面的示例，对象 c 是对象 a 和对象 b 的合成，具备两者的接口。

下面是一个更完备的实现，将多个类的接口“混入”另一个类。

function mix(...mixins) {
  class Mix {
    constructor() {
      for (let mixin of mixins) {
        copyProperties(this, new mixin()) // 拷贝实例属性
      }
    }
  }

  for (let mixin of mixins) {
    copyProperties(Mix, mixin) // 拷贝静态属性
    copyProperties(Mix.prototype, mixin.prototype) // 拷贝原型属性
  }

  return Mix
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if (
      key !== 'constructor'
      && key !== 'prototype'
      && key !== 'name'
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key)
      Object.defineProperty(target, key, desc)
    }
  }
}

上面示例中的的 mix 函数，可以将多个对象合成为一个类。使用的时候，只要继承这个类即可。

class DistributedEdit extends mix(Loggable, Serializable) {
  // ...
}

The end.

细读 ES6 | Class 下篇

一、简介

二、Object.getPrototypeOf()

三、super 关键字

1. super 作为函数

2. super 作为对象

3. 注意事项

4. 关于 super 总结

四、类的 prototype 属性和 proto 属性

五、Mixin 模式的实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

细品 JavaScript

细读 ES6 | Class 下篇

一、简介

二、Object.getPrototypeOf()

三、super 关键字

1. super 作为函数

2. super 作为对象

3. 注意事项

4. 关于 super 总结

四、类的 prototype 属性和 __proto__ 属性

五、Mixin 模式的实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

细品 JavaScript

四、类的 prototype 属性和 proto 属性