es6 class進階【一個將class轉原型物件的例子】

orchild發表於2018-12-19
原型物件
背景

class的出現，讓js開發者告別了使用原型物件模仿物件導向中的類和類繼承時代。在前端開發中，使用到class的地方非常之多，所以掌握class的用法已經必不可少了。

劃重點

JS 中並沒有一個真正的 class 原始型別， class 僅僅只是對原型物件運用語法糖(PS：什麼是語法糖？就是不用寫原始方法，而是提供了一種簡單的寫法，底層還是原始的方法)。所以，只有理解如何使用原型物件實現類和類繼承，才能真正地用好 class。【關於使用原型物件實現類和類繼承詳解，後續持續更新】

來看一個class的例子

先記一個知識點：class裡面可以寫 三種 方法，第一種是constructor內部的方法，第二種是原型鏈上的方法，第三種是static函式靜態方法。

class Person{
  constructor(name) {
    this.name = name;
    // constructor內部的方法，在 new 一個例項的時候就會生命這個方法，一般情況下也是在內部呼叫的
    function hello1() {
      console.log(`hello1 ${name}, this is an inner function!`)
    }
    hello1()
  }
  hello2() {
    console.log(`hello2 ${this.name}, this is a prototype function!`);
  }
  // 靜態方法，不需要new就可以呼叫
  static hello3() {
    // 這裡的 this.name 返回的是class的名字
    console.log(`hello3 ${this.name}, this is a static function!`); 
  }
}
const p = new Person('orchid'); 
// 結果： hello1 orchid, this is an inner function!
p.hello2();   
// 結果： hello2 orchid, this is a prototype function!
Person.hello3();   
// 結果： hello3 Person, this is a static function!
複製程式碼
對應的原型物件實現
function Person(name) {
  this.name = name;
  // 與上面的 hello1 對應
  function hello1() {
     console.log(`hello1 ${name}, this is an inner function!`)
  }
  hello1();
}
// 與上面的 hello2 對應
Person.prototype.hello2 = function() {
  console.log(`hello2 ${this.name}, this is a prototype function!`);
}
// 與上面的 static 方法 hello3 對應
Person.hello3  = function() {
  console.log(`hello3 ${this.name}, this is a static function!`);
}
const p = new Person('orchid');
// 結果： hello1 orchid, this is an inner function!
p.hello2();    
// 結果： hello2 orchid, this is a prototype function!
Person.hello3();   
// 結果： hello3 Person, this is a static function!
複製程式碼

相信你通過上面的例子已經知道了為什麼說class只是一種語法糖了，程式碼的確是簡單而且容易閱讀了。

上面就是一個將es6轉化為原型物件的程式碼實現。es6其實就是將class語法轉成了原型物件實現，底部還是原型物件的程式碼。其實class就是一個函式而已。

本文作者簡書地址

相關文章