1. 程式人生 > 實用技巧 >es6 的類 class

es6 的類 class

1、ES6提供了更接近傳統語言的寫法,引入了Class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類。

2、

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

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

上面程式碼定義了一個“類”,可以看出裡面有一個constructor方法,這就是構造方法,而this關鍵字則代表例項物件。也就是說,ES5的建構函式point,對應ES6的point類的構造方法。

3、定義“類‘的方法時,前面不需要新增function這個關鍵字,直接把函式定義加進去就可以了。另外,方法之間不需要逗號分隔,加了會報錯。

4、建構函式的prototype屬性,在ES6的”類“上繼續存在,事實上,類的所有方法都定義在類的prototype屬性上面。

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

  toString(){
    // ...
  }

  toValue(){
    // ...
  }
}

// 等同於

Point.prototype = {
  toString(){},
  toValue(){}
};

5、Object.assign方法可以很方便地一次向類新增多個方法。

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

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

6、類的內部所有定義的方法,都是不可列舉的(non-enumerable)。這一點與ES5的行為不一致。

7、類的屬性名,可以採用表示式。

let methodName = "getArea";
class Square{
  constructor(length) {
    // ...
  }

  [methodName]() {
    
// ... } }

上面程式碼中,Square類的方法名getArea,是從表示式得到的。

8、constructor方法是類的預設方法,通過new命令生成物件例項時,自動呼叫該方法。一個類必須有constructor方法,如果沒有顯式定義,一個空的constructor方法會被預設新增。constructor方法預設返回例項物件(即this),完全可以指定返回另外一個物件。

9、類的建構函式,不使用new是沒法呼叫的,會報錯。

10、可以通過例項的__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"

11、使用例項的__proto__屬性改寫原型,必須相當謹慎,不推薦使用,因為這會改變Class的原始定義,影響到所有例項。

12、Class不存在變數提升(hoist)。