昨天，360面試官問了個問題，說：用ES5怎麼實現ES6中的class？

因為沒有看過class，就說不了解，結果回來一看，這不就是ES5怎麼建立物件嗎？？？我寫了那麼多，看了那麼多，就這麼不會的完事的，哎。。。今天，來總結一下ES6中的Class

極客學院講的很詳細，參考 這裡

目錄

1.簡介

1.簡介

Class是ES6中新引入的概念，作為物件的模板，通過Class關鍵字可以定義類。它的絕大部分功能ES5都可以做到，新的class寫法只是讓物件原型的寫法更加清晰，更像面向物件程式設計

ES5寫法：

function Point(x,y){
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '('+this.x+', '+this.y+')';
}
 

ES6寫法：

//定義類
class Point {

  //構造方法
  constructor(x, y) {
    //this指向例項物件
    this.x = x;
    this.y = y;
  }

  toString() {
    return '('+this.x+', '+this.y+')';
  }

}

ES5的建構函式Point對應ES6的Point類的構造方法，在class中，除了構造方法constructor之外，類的其餘方法都是定義在類的prototype屬性上面

由於類的方法（除constructor以外）都定義在prototype物件上面，所以類的新方法可以新增在prototype物件上面。Object.assign

方法可以很方便地一次向類新增多個方法。

Class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
})

prototype物件的constructor屬性，直接指向“類”的本身，這與ES5的行為是一致的

Point.prototype.constructor === Point // true

2.constructor方法

是累的預設方法，通過new命令生成物件例項時，自動呼叫該方法。一個類必須得有constructor方法，如果沒有顯示定義，一個空的constructor方法會被預設新增

constructor（）{}

constructor方法預設返回例項物件（即this），完全可以指定返回另外一個物件

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

3.例項物件

使用new操作符建立例項

與ES5一樣，例項的屬性除非顯式定義在其本身（即定義在this物件上），否則都是定義在原型上（即定義在class上）。

//定義類
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '('+this.x+', '+this.y+')';
  }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__ === p2.__proto__
//true

上面程式碼中，p1和p2都是Point的例項，它們的原型都是Point，所以__proto__屬性是相等的。

這也意味著，可以通過__proto__屬性為Class新增方法。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__.printName = function () { return 'Oops' };

p1.printName() // "Oops"
p2.printName() // "Oops"

var p3 = new Point(4,2);
p3.printName() // "Oops"

上面程式碼在p1的原型上添加了一個printName方法，由於p1的原型就是p2的原型，因此p2也可以呼叫這個方法。而且，此後新建的例項p3也可以呼叫這個方法。這意味著，使用例項的__proto__屬性改寫原型，必須相當謹慎，不推薦使用，因為這會改變Class的原始定義，影響到所有例項。

4.name屬性

由於本質上，ES6的Class只是ES5的建構函式的一層包裝，所以函式的許多特性都被Class繼承，包括name屬性。

class Point {}

Point.name // "Point"

name屬性總是返回緊跟在class關鍵字後面的類名。

5.class表示式

與函式一樣，Class也可以使用表示式的形式定義。

const MyClass = class Me {
  getClassName() {
    return Me.name;
  }
};

上面程式碼使用表示式定義了一個類。需要注意的是，這個類的名字是MyClass而不是Me，Me只在Class的內部程式碼可用，指代當前類。

let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined

上面程式碼表示，Me只在Class內部有定義。

如果Class內部沒用到的話，可以省略Me，也就是可以寫成下面的形式。

const MyClass = class { /* ... */ };

6.不存在變數提升

new Foo(); // ReferenceError

class Foo {}

這種規定的原因與下文要提到的繼承有關，必須保證子類在父類之後定義。

{
  let Foo = class {};
  class Bar extends Foo {
  }
}

如果存在Class的提升，上面程式碼將報錯，因為let命令也是不提升的。

7.嚴格模式

類和模組的內部，預設就是嚴格模式，所以不需要使用use strict指定執行模式。考慮到未來所有的程式碼，其實都是執行在模組之中，所以ES6實際上把整個語言升級到了嚴格模式。

8.Class的繼承

基本用法

Class之間可以通過extends關鍵字，實現繼承，這比ES5的通過修改原型鏈實現繼承，要清晰和方便很多。

class ColorPoint extends Point {}

上面程式碼定義了一個ColorPoint類，該類通過extends關鍵字，繼承了Point類的所有屬性和方法。但是由於沒有部署任何程式碼，所以這兩個類完全一樣，等於複製了一個Point類。下面，我們在ColorPoint內部加上程式碼。

class ColorPoint extends Point {

  constructor(x, y, color) {
    super(x, y); // 等同於parent.constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 等同於parent.toString()
  }

}

上面程式碼中，constructor方法和toString方法之中，都出現了super關鍵字，它指代父類的例項（即父類的this物件）。

子類必須在constructor方法中呼叫super方法，否則新建例項時會報錯。

class Point { /* ... */ }

class ColorPoint extends Point {
  constructor() {
  }
}

let cp = new ColorPoint(); // ReferenceError

如果子類沒有定義constructor方法，這個方法會被預設新增，程式碼如下。也就是說，不管有沒有顯式定義，任何一個子類都有constructor方法。

constructor(...args) {
  super(...args);
}

另一個需要注意的地方是，在子類的建構函式中，只有呼叫super之後，才可以使用this關鍵字，否則會報錯。這是因為沒有呼叫父類的建構函式，就無法子類例項的構建。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正確
  }
}

上面程式碼中，子類的constructor方法沒有呼叫super之前，就使用this關鍵字，結果報錯，而放在super方法之後就是正確的。

下面是生成子類例項的程式碼。

let cp = new ColorPoint(25, 8, 'green');

cp instanceof ColorPoint // true
cp instanceof Point // true

上面程式碼中，例項物件cp同時是ColorPoint和Point兩個類的例項，這與ES5的行為完全一致。

9.類的prototype屬性和__proto__屬性

在ES5中，每一個物件都有__proto__屬性，指向對應的建構函式的prototype屬性。Class作為建構函式的語法糖，同時有prototype屬性和__proto__屬性，因此同時存在兩條繼承鏈。

（1）子類的__proto__屬性，表示建構函式的繼承，總是指向父類。

（2）子類prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

上面程式碼中，子類A的__proto__屬性指向父類B，子類A的prototype屬性的proto屬性指向父類B的prototype屬性。

第一條繼承鏈，實質如下。

class B extends A {
  constructor() {
    return A.call(this);
  }
}

// 等同於

class B extends A {
  constructor() {
    return B.__proto__.call(this);
  }
}

第二條繼承鏈，實質如下。

B.prototype = new A();
// 等同於
B.prototype.__proto__ = A.prototype;

此外，還有三種特殊情況。

第一種特殊情況，子類A繼承Object。這種情況下，A其實就是建構函式Object的複製，A的例項就是Object的例項。

class A {
}

A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true

第二種特殊情況，A作為一個基類（即不存在任何繼承），就是一個普通函式，所以直接繼承Funciton.prototype。但是，A呼叫後返回一個空物件（即Object例項），所以A.prototype.__proto__指向建構函式（Object）的prototype屬性。

class A extends null {
}

A.__proto__ === Function.prototype // true
A.prototype.__proto__ === null // true

第三種特殊情況，與第二種情況非常像。A也是一個普通函式，所以直接繼承Funciton.prototype。但是，A呼叫後返回的物件不繼承任何方法，所以它的__proto__指向Function.prototype，即實質上執行了下面的程式碼。

class C extends null {
  constructor() { return Object.create(null); }
}

10.Object.getPrototypeOf()

Object.getPrototypeOf方法可以用來從子類上獲取父類。

Object.getPrototypeOf(ColorPoint) === Point
// true

11.例項的__proto__屬性

父類和子類的__proto__屬性，指向是不一樣的。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto // false
p2.__proto__.__proto__ === p1.__proto__ // true

通過子類的__proto__屬性，可以修改父類。

p2.__proto__.__proto__.printName = function () {
  console.log('Ha');
};

p1.printName() // "Ha"

上面程式碼在ColorPoint的例項p2上向Point類新增方法，結果影響到了Point的例項p1。

12.建構函式的繼承

下面是一個繼承原生的Array建構函式的例子。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[1] = 12;

上面程式碼定義了一個MyArray類，繼承了Array建構函式，因此就可以從MyArray生成陣列的例項。這意味著，ES6可以自定義原生資料結構（比如Array、String等）的子類，這是ES5無法做到的。

上面這個例子也說明，extends關鍵字不僅可以用來繼承類，還可以用來繼承建構函式。下面是一個自定義Error子類的例子。

class MyError extends Error {
}

throw new MyError('Something happened!');

13.class的取值函式（getter）和存值函式（setter）

與ES5一樣，在Class內部可以使用get和set關鍵字，對某個屬性設定存值函式和取值函式。

class MyClass {
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

上面程式碼中，prop屬性有對應的存值函式和取值函式，因此賦值和讀取行為都被自定義了。

14.Class的Generator方法

如果某個方法之前加上星號（*），就表示該方法是一個Generator函式。

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

上面程式碼中，Foo類的Symbol.iterator方法前有一個星號，表示該方法是一個Generator函式。Symbol.iterator方法返回一個Foo類的預設遍歷器，for...of迴圈會自動呼叫這個遍歷器。

15.Class的靜態方法

類相當於例項的原型，所有在類中定義的方法，都會被例項繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被例項繼承，而是直接通過類來呼叫，這就稱為“靜態方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: undefined is not a function

上面程式碼中，Foo類的classMethod方法前有static關鍵字，表明該方法是一個靜態方法，可以直接在Foo類上呼叫（Foo.classMethod()），而不是在Foo類的例項上呼叫。如果在例項上呼叫靜態方法，會丟擲一個錯誤，表示不存在該方法。

父類的靜態方法，可以被子類繼承。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod(); // 'hello'

上面程式碼中，父類Foo有一個靜態方法，子類Bar可以呼叫這個方法。

靜態方法也是可以從super物件上呼叫的。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod();