JS中構造函數與Class類的區別

Function vs Class

寫法上有區別，本質上無差別

 

class Clz {
  a() {}
  b() {}
}

 

Class的數據類型：

typeof Clz; // 'function'

Class對象本身：

Clz === Clz.prototype.constructor; // true

 

需要注意的隱晦差異：

function Clzf() {}

Clzf.prototype.a = function() {};
Clzf.prototype.b = function() {};

Class內部定義的方法是不可枚舉的，但通過構造函數定義的方法是可枚舉的。

Object.keys(Clz.prototype); // []

Object.keys(Clzf.prototype); // ['a', 'b']

 

關於 new.target 屬性

該屬性可以用來檢測是否是使用 new 運算符調用的構造方法或者函數。

通過使用 new 運算法，new.target會返回一個指向構造方法或函數的引用。

普通函數調用，new.target的返回值爲undefined.

function Foo() {
  if (new.target === undefined) {
    throw new Error('Foo() must be called with new');
  }
  console.log('Foo instantiated with new.');
}

Foo(); // 報錯
new Foo(); // Foo instantiated with new.

class A {
  constructor() {
    console.log(new.target.name);
  }
}

class B extends A {
  constructor() {
    super();
  }
}

const a = new A(); // 'A'
const b = new B(); // 'B'