• 寫法

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

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

• 1 注意
  • 類的所有方法都定義在類的prototype屬性上面
  • 類的內(nèi)部所有定義的方法，都是不可枚舉的
  • 定義“類”的方法的時(shí)候，前面不需要加上function這個(gè)關(guān)鍵字
  • 類的方法之間不需要逗號(hào)分隔，加了會(huì)報(bào)錯(cuò)
• 2 類的constructor方法：
  1 當(dāng)類沒有constructor方法時(shí)，會(huì)添加空的constructor方法
2 constructor默認(rèn)返回this對(duì)象，與es5的構(gòu)造函數(shù)是一樣的
• 2.1 類的實(shí)例屬性
  1 實(shí)例屬性可以寫在constructor中，也可以寫在最頂部

  class foo {
    bar = 'hello';
    baz = 'world';
  
    constructor() {
      // ...
    }
  }
  

• 3 類的實(shí)例對(duì)象
  • 生成類的實(shí)例時(shí)必須使用new關(guān)鍵字,且類不能自己調(diào)用;
• 4 類的原型對(duì)象
  • get和set關(guān)鍵字對(duì)屬性設(shè)置存取函數(shù)，攔截該屬性的行為

  class MyClass {
    constructor() {
      // ...
    }
    get prop() {
      return 'getter';
    }
    set prop(value) {
      console.log('setter: '+value);
    }
  }
  
  let inst = new MyClass();
  
  inst.prop = 123;
  // setter: 123
  
  inst.prop
  // 'getter'
  

  • 里面的方法默認(rèn)綁定this為類的實(shí)例，可是如果單獨(dú)取出該方法，會(huì)丟失this指針，在react中就是如此。為了指向正確的this，可以使用箭頭函數(shù)，bind方法和proxy代理
• 5.1 靜態(tài)方法
  • 1 使用static關(guān)鍵字來描述類的靜態(tài)方法，在靜態(tài)方法中this指向類本身
  • 2 子類可以繼承父類的靜態(tài)方法
  • 3 在子類的方法中可以使用super來調(diào)用父類的靜態(tài)方法
• 5.2 靜態(tài)屬性
  • 1 目前只有這種寫法，有個(gè)提案用static來代表靜態(tài)屬性

  class Foo {
  }
  
  Foo.prop = 1;
  Foo.prop // 1
  

• 5.3 私有屬性和私有方法
  • 有個(gè)提案使用#表示私有屬性和私有方法
• 6 new.target屬性
  • 1 該屬性一般用在構(gòu)造函數(shù)之中，返回new命令作用于的那個(gè)構(gòu)造函數(shù)

  class Rectangle {
    constructor(length, width) {
      console.log(new.target === Rectangle);
      this.length = length;
      this.width = width;
    }
  }
  
  var obj = new Rectangle(3, 4); // 輸出 true
  

• 2 如果子類繼承父類時(shí)，new.target會(huì)返回子類

class Rectangle {
 constructor(length, width) {
   console.log(new.target === Rectangle);
   // ...
 }
}

class Square extends Rectangle {
 constructor(length) {
   super(length, length);
 }
}

var obj = new Square(3); // 輸出 false

• 7 類的繼承
  • 使用extends關(guān)鍵字實(shí)現(xiàn)繼承
  • 在繼承時(shí),必須在使用this之前調(diào)用super方法
    這是因?yàn)樽宇愖约旱膖his對(duì)象，必須先通過父類的構(gòu)造函數(shù)完成塑造，得到與父類同樣的實(shí)例屬性和方法， 然后再對(duì)其進(jìn)行加工，加上子類自己的實(shí)例屬性和方法。如果不調(diào)用super方法，子類就得不到this對(duì)象。
• 7.1 super關(guān)鍵字
  • super當(dāng)函數(shù)使用,只能在constructor中使用,此時(shí)代表父類的構(gòu)造函數(shù)
  • 作為對(duì)象使用,在普通方法中指向父類的原型對(duì)象(拿不到父類實(shí)例對(duì)象的屬性),在靜態(tài)方法中,指向父類本身;
  • 在子類普通方法中通過super調(diào)用父類的方法時(shí)，方法內(nèi)部的this指向當(dāng)前的子類實(shí)例。在子類的靜態(tài)方法中通過super調(diào)用父類的方法時(shí)，方法內(nèi)部的this指向當(dāng)前的子類，而不是子類的實(shí)例。
  • 由于this指向子類實(shí)例，所以如果通過super對(duì)某個(gè)屬性賦值，這時(shí)super就是this，賦值的屬性會(huì)變成子類實(shí)例的屬性。

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();