Class：向传统类模式转变的构造函数

前言

JS基于原型的‘类’，一直被转行前端的码僚们大呼惊奇，但接近传统模式使用 class关键字定义的出现，却使得一些前端同行深感遗憾而纷纷留言：“还我独特的JS”、“净搞些没实质的东西”、“自己没有类还非要往别家的类上靠”，甚至是“已转行”等等。有情绪很正常，毕竟新知识意味着更多时间与精力的开销，又不是简单的闭眼享受。

然而历史的轴印前行依旧，对于 class可以肯定的一点是你不能对面试官说：“拜托，不是小弟不懂，仅仅是不愿意了解，您换个问题呗！”一方面虽然 class只是个语法糖，但 extends对继承的改进还是不错的。另一方面今后可能在‘类’上出现的新特性应该是由 class而不是构造函数承载，谁也不确定它将来会出落得怎样标致。因此，来来来，慢慢的喝下这碗热气腾腾的红糖姜汤。

1 class

ECMAScript中没有类的概念，我们的实例是基于原型由构造函数生成具有动态属性和方法的对象。不过为了与国际接轨，描述的更为简便和高大上，依然会使用‘类’这一词。所以JS的类等同于构造函数。ES6的 class只是个语法糖，其定义生成的对象依然构造函数。不过为了与构造函数模式区分开，我们称其为类模式。学习 class需要有构造函数和原型对象的知识，具体可以自行百度。

1. // ---使用构造函数

2. function C () {

3.  console.log('New someone.');

4. }

6. C.a = function () { return 'a'; }; // 静态方法

8. C.prototype.b = function () { return 'b'; }; // 原型方法

11. // ---使用class

12. class C {

13.  static a() { return 'a'; } // 静态方法

15.  constructor() { console.log('New someone.'); } // 构造方法

17.  b() { return 'b'; } // 原型方法

18. };

1.1 与变量对比

关键字 class类似定义函数的关键字 function，其定义的方式有声明式和表达式（匿名式和命名式）两种。通过声明式定义的变量的性质与 function不同，更为类似 let和 const，不会提前解析，不存在变量提升，不与全局作用域挂钩和拥有暂时性死区等。 class定义生成的变量就是一个构造函数，也因此，类可以写成立即执行的模式。

1. // ---声明式

2. class C {}

3. function F() {}

5. // ---匿名表达式

6. let C = class {};

7. let F = function () {};

9. // ---命名表达式

10. let C = class CC {};

11. let F = function FF() {};

13. // ---本质是个函数

14. class C {}

15. console.log(typeof C); // function

16. console.log(Object.prototype.toString.call(C)); // [object Function]

17. console.log(C.hasOwnProperty('prototype')); // true

19. // ---不存在变量提升

20. C; // 报错，不存在C。

21. class C {}

22. // 存在提前解析和变量提升

23. F; // 不报错，F已被声明和赋值。

24. function F() {}

26. // ---自执行模式

27. let c = new (class {

28. })();

29. let f = new (function () {

30. })();

1.2 与对象对比

类内容（ {}里面）的形式与对象字面量相似。不过类内容里面只能定义方法不能定义属性，方法的形式只能是函数简写式，方法间不用也不能用逗号分隔。方法名可以是带括号的表达式，也可以为 Symbol值。方法分为三类，构造方法（ constructor方法）、原型方法（存在于构造函数的 prototype属性上）和静态方法（存在于构造函数本身上）

1. class C {

2.  // 原型方法a

3.  a() { console.log('a'); }

4.  // 构造方法，每次生成实例时都会被调用并返回新实例。

5.  constructor() {}

6.  // 静态方法b，带static关键字。

7.  static b() { console.log('b'); }

8.  // 原型方法，带括号的表达式

9.  ['a' + 'b']() { console.log('ab'); }

10.  // 原型方法，使用Symbol值

11.  [Symbol.for('s')]() { console.log('symbol s'); }

12. }

14. C.b(); // b

16. let c = new C();

17. c.a(); // a

18. c.ab(); // ab

19. c[Symbol.for('s')](); // symbol s

不能直接定义属性，并不表示类不能有原型或静态属性。解析 class会形成一个构造函数，因此只需像为构造函数添加属性一样为类添加即可。更为直接也是推荐的是只使用 getter函数定义只读属性。为什么不能直接设置属性？是技术不成熟？是官方希望传递某种思想？抑或仅仅是笔者随意抛出的一个问题？

1. // ---直接在C类（构造函数）上修改

2. class C {}

3. C.a = 'a';

4. C.b = function () { return 'b'; };

5. C.prototype.c = 'c';

6. C.prototype.d = function () { return 'd'; };

8. let c = new C();

9. c.c; // c

10. c.d(); // d

12. // ---使用setter和getter

13. // 定义只能获取不能修改的原型或静态属性

14. class C {

15.  get a() { return 'a'; }

16.  static get b() { return 'b'; }

17. }

19. let c = new C();

20. c.a; // a

21. c.a = '1'; // 赋值没用，只有get没有set无法修改。

1.3 与构造函数对比

下面是使用构造函数和类实现相同功能的代码。直观上， class简化了代码，使得内容更为聚合。 constructor方法体等同构造函数的函数体，如果没有显式定义此方法，一个空的 constructor方法会被默认添加用于返回新的实例。与ES5一样，也可以自定义返回另一个对象而不是新实例。

1. // ---构造函数

2. function C(a) {

3.  this.a = a;

4. }

6. // 静态属性和方法

7. C.b = 'b';

8. C.c = function () { return 'c'; };

10. // 原型属性和方法

11. C.prototype.d = 'd';

12. C.prototype.e = function () { return 'e'; };

13. Object.defineProperty(C.prototype, 'f', { // 只读属性

14.  get() {

15.    return 'f';

16.  }

17. });

19. // ---类

20. class C {

21.  static c() { return 'c'; }

23.  constructor(a) {

24.    this.a = a;

25.  }

27.  e() { return 'e'; }

28.  get f() { return 'f'; }

29. }

31. C.b = 'b';

32. C.prototype.d = 'd';

类虽然是个函数，但只能通过 new生成实例而不能直接调用。类内部所定义的全部方法是不可枚举的，在构造函数本身和 prototype上添加的属性和方法是可枚举的。类内部定义的方法默认是严格模式，无需显式声明。以上三点增加了类的严谨性，比较遗憾的是，依然还没有直接定义私有属性和方法的方式。

1. // ---能否直接调用

2. class C {}

3. C(); // 报错

5. function C() {}

6. C(); // 可以

9. // ---是否可枚举

10. class C {

11.  static a() {} // 不可枚举

12.  b() {} // 不可枚举

13. }

15. C.c = function () {}; // 可枚举

16. C.prototype.d = function () {}; // 可枚举

18. isEnumerable(C, ['a', 'c']); // a false, c true

19. isEnumerable(C.prototype, ['b', 'd']); // b false, d true

21. function isEnumerable(target, keys) {

22.  let obj = Object.getOwnPropertyDescriptors(target);

23.  keys.forEach(k => {

24.    console.log(k, obj[k].enumerable);

25.  });

26. }

29. // ---是否为严格模式

30. class C {

31.  a() {

32.    let is = false;

33.    try {

34.      n = 1;

35.    } catch (e) {

36.      is = true;

37.    }

38.    console.log(is ? 'true' : 'false');

39.  }

40. }

42. C.prototype.b = function () {

43.  let is = false;

44.  try {

45.    n = 1;

46.  } catch (e) {

47.    is = true;

48.  }

49.  console.log(is ? 'true' : 'false');

50. };

52. let c = new C();

53. c.a(); // true，是严格模式。

54. c.b(); // false，不是严格模式。

在方法前加上 static关键字表示此方法为静态方法，它存在于类本身，不能被实例直接访问。静态方法中的 this指向类本身。因为处于不同对象上，静态方法和原型方法可以重名。ES6新增了一个命令 new.target，指代 new后面的构造函数或 class，该命令的使用有某些限制，具体请看下面示例。

1. // ---static

2. class C {

3.  static a() { console.log(this === C); }

4.  a() { console.log(this instanceof C); }

5. }

7. let c = new C();

8. C.a(); // true

9. c.a(); // true

12. // ---new.target

13. // 构造函数

14. function C() {

15.  console.log(new.target);

16. }

18. C.prototype.a = function () { console.log(new.target); };

20. let c = new C(); // 打印出C

21. c.a(); // 在普通方法中为undefined。

23. // ---类

24. class C {

25.  constructor() { console.log(new.target); }

26.  a() { console.log(new.target); }

27. }

29. let c = new C(); // 打印出C

30. c.a(); // 在普通方法中为undefined。

32. // ---在函数外部使用会报错

33. new.target; // 报错

2 extends

ES5中的经典继承方法是寄生组合式继承，子类会分别继承父类实例和原型上的属性和方法。ES6中的继承本质也是如此，不过实现方式有所改变，具体如下面的代码。可以看到，原型上的继承是使用 extends关键字这一更接近传统语言的形式，实例上的继承是通过调用 super完成子类 this塑造。表面上看，方式更为的统一和简洁。

1. class C1 {

2.  constructor(a) { this.a = a; }

3.  b() { console.log('b'); }

4. }

6. class C extends C1 { // 继承原型数据

7.  constructor() {

8.    super('a'); // 继承实例数据

9.  }

10. }

2.1 与构造函数对比

使用 extends继承，不仅仅会将子类的 prototype属性的原型对象（ __proto__）设置为父类的 prototype，还会将子类本身的原型对象（ __proto__）设置为父类本身。这意味着子类不单单会继承父类的原型数据，也会继承父类本身拥有的静态属性和方法。而ES5的经典继承只会继承父类的原型数据。不单单是财富，连老爸的名气也要获得，不错不错。

1. class C1 {

2.  static get a() { console.log('a'); }

3.  static b() { console.log('b'); }

4. }

6. class C extends C1 {

7. }

8. // 等价，没有构造方法会默认添加。

9. class C extends C1 {

10.  constructor(...args) {

11.    super(...args);

12.  }

13. }

15. let c = new C();

16. C.a; // a，继承了父类的静态属性。

17. C.b(); // b，继承了父类的静态方法。

18. console.log(Object.getPrototypeOf(C) === C1); // true，C的原型对象为C1

19. console.log(Object.getPrototypeOf(C.prototype) === C1.prototype); // true，C的prototype属性的原型对象为C1的prototype

ES5中的实例继承，是先创造子类的实例对象 this，再通过 call或 apply方法，在 this上添加父类的实例属性和方法。当然也可以选择不继承父类的实例数据。而ES6不同，它的设计使得实例继承更为优秀和严谨。

在ES6的实例继承中，是先调用 super方法创建父类的 this（依旧指向子类）和添加父类的实例数据，再通过子类的构造函数修饰 this，与ES5正好相反。ES6规定在子类的 constructor方法里，在使用到 this之前，必须先调用 super方法得到子类的 this。不调用 super方法，意味着子类得不到 this对象。

1. class C1 {

2.  constructor() {

3.    console.log('C1', this instanceof C);

4.  }

5. }

7. class C extends C1 {

8.  constructor() {

9.    super(); // 在super()之前不能使用this，否则报错。

10.    console.log('C');

11.  }

12. }

14. new C(); // 先打印出C1 true，再打印C。

2.2 super

关键字 super比较奇葩，在不同的环境和使用方式下，它会指代不同的东西（总的说可以指代对象或方法两种）。而且在不显式的指明是作为对象或方法使用时，比如 console.log(super)，会直接报错。

作为函数时。 super只能存在于子类的构造方法中，这时它指代父类构造函数。

作为对象时。 super在静态方法中指代父类本身，在构造方法和原型方法中指代父类的 prototype属性。不过通过 super调用父类方法时，方法的 this依旧指向子类。即是说，通过 super调用父类的静态方法时，该方法的 this指向子类本身；调用父类的原型方法时，该方法的 this指向该（子类的）实例。而且通过 super对某属性赋值时，在子类的原型方法里指代该实例，在子类的静态方法里指代子类本身，毕竟直接在子类中通过 super修改父类是很危险的。

很迷糊对吧，疯疯癫癫的，还是结合着代码看吧！

1. class C1 {

2.  static a() {

3.    console.log(this === C);

4.  }

5.  b() {

6.    console.log(this instanceof C);

7.  }

8. }

10. class C extends C1 {

11.  static c() {

12.    console.log(super.a); // 此时super指向C1，打印出function a。

14.    this.x = 2; // this等于C。

15.    super.x = 3; // 此时super等于this，即C。

16.    console.log(super.x); // 此时super指向C1，打印出undefined。

17.    console.log(this.x); // 值已改为3。

19.    super.a(); // 打印出true，a方法的this指向C。

20.  }

22.  constructor() {

23.    super(); // 指代父类的构造函数

25.    console.log(super.c); // 此时super指向C1.prototype，打印出function c。

27.    this.x = 2; // this等于新实例。

28.    super.x = 3; // 此时super等于this，即实例本身。

29.    console.log(super.x); // 此时super指向C1.prototype，打印出undefined。

30.    console.log(this.x); // 值已改为3。

32.    super.b(); // 打印出true，b方法的this指向实例本身。

33.  }

34. }

2.3 继承原生构造函数

使用构造函数模式，构建继承了原生数据结构（比如 Array）的子类，有许多缺陷的。一方面由上文可知，原始继承是先创建子类 this，再通过父类构造函数进行修饰，因此无法获取到父类的内部属性（隐藏属性）。另一方面，原生构造函数会直接忽略 call或 apply方法传入的 this，导致子类根本无法获取到父类的实例属性和方法。

1. function MyArray(...args) {

2.  Array.apply(this, args);

3. }

5. MyArray.prototype = Array.prototype;

6. // MyArray.prototype.constructor = MyArray;

8. let arr = new MyArray(1, 2, 3); // arr为对象，没有储存值。

9. arr.push(4, 5); // 在arr上新增了0，1和length属性。

10. arr.map(d => d); // 返回数组[4, 5]

11. arr.length = 1; // arr并没有更新，依旧有0，1属性，且arr[1]为5。

创建类的过程，是先构造一个属于父类却指向子类的 this（绕口），再通过父类和子类的构造函数进行修饰。因此可以规避构造函数的问题，获取到父类的实例属性和方法，包括内部属性。进而真正的创建原生数据结构的子类，从而简单的扩展原生数据类型。另外还可以通过设置 Symbol.species属性，使得衍生对象为原生类而不是自定义子类的实例。

1. class MyArray extends Array { // 实现是如此的简单

2.  static get [Symbol.species]() { return Array; }

3. }

5. let arr = new MyArray(1, 2, 3); // arr为数组，储存有1，2，3。

6. arr.map(d => d); // 返回数组[1, 2, 3]

7. arr.length = 1; // arr正常更新，已包含必要的内部属性。

需要注意的是继承 Object的子类。ES6改变了 Object构造函数的行为，一旦发现其不是通过 new Object()这种形式调用的，构造函数会忽略传入的参数。由此导致 Object子类无法正常初始化，但这不是个大问题。

1. class MyObject extends Object {

2.  static get [Symbol.species]() { return Object; }

3. }

5. let o = new MyObject({ id: 1 });

6. console.log(o.hasOwnPropoty('id')); // false，没有被正确初始化

推荐

ES6精华：Symbol
ES6精华：Promise
Async：简洁优雅的异步之道
Generator：JS执行权的真实操作者 

END

作者：wmaker
https://segmentfault.com/a/1190000016475608