隨手扎

7天搞懂JS進階議題(day04)-Class & Constructor: 吃語法糖別噎到

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

現在你應該已經有發車前的基礎準備了。繫緊安全帶，撈思跡要踩油門加速了！

關於class這個關鍵字，JS將其作為保留字好一段時間，直至ES6標準的制定，再經過瀏覽器漫長的實做，至今才有class的語法糖可以使用。

ECMAScript 6 中引入了類別 (class) 作為 JavaScript 現有原型程式(prototype-based)繼承的語法糖。類別語法並不是要引入新的物件導向繼承模型到 JavaScript 中，而是提供一個更簡潔的語法來建立物件和處理繼承。

昨天，已經有了prototype-based的概念，這將有助於你更安全的吃這個語法糖而不噎到。偌你還不清楚JS裡的Prototype，建議你坐時光機回昨天看看。

在第二天說明過new Operator建立物件的方法。當時給的例子如下：

function FooConstructor(name){
  this.name = name;
  this.hello = function(){
     console.log(`Hello, ${this.name}`);
  }
}

var obj2 = new FooConstructor("Foo");
obj2.hello() // Hello, Foo

今天要改寫成class語法糖的形式，其實這幾乎是等價的，因為「類別實際上是一種特別的函數」1。

類別實際上是一種特別的函數(functions)，就跟你可以定義函數敘述和函數宣告一樣，類別的語法有兩個元件：類別敘述(class expressions)和類別宣告(class declarations)。

class _Foo{
    constructor(name){
      this.name = name;
    }
    
  hello(){
     console.log(`Hello, ${this.name}`);
  }
}
var obj0 = new _Foo("_Foo");
obj0.hello() // Hello, _Foo

你可以使用 類別敘述(class expressions) 或 類別宣告(class declarations) 的方式定義類別，上面範例就是類別宣告。同函式有 函式敘述(function expressions) 2，也可使用類別敘述：

var Foo = class {
    constructor(name){
      this.name = name;
    }
    
  hello(){
     console.log(`Hello, ${this.name}`);
  }
}
var obj0 = new Foo("Foo");
obj0.hello() // Hello, Foo

// class _Foo{} // error! 重複宣告_Foo

這差別在於類別宣告會加以保護，無法再次宣告(很像let)。不過由於類別敘述更好用於測試示例(因為可以複寫)，故本文之後都會使用類別敘述，但實務上，我會更推薦你使用類別宣告。

現在，或許你明白了為什麼第二天會使用FooConstructor的命名方式，這恰好可以和class Foo{constructor(){}}相對應。此外其實還有更多細節。

Prototype的consructor

之前還看過這樣的例子：

var obj3 = {};
obj3.constructor = FooConstructor;
obj3.constructor("Kitty");
obj3.hello(); // => Hello, Kitty

var obj4 = {};
obj4.__proto__ = FooConstructor.prototype;
obj4.constructor("K-on"); // 完了，暴露宅屬性
obj4.hello(); // => Hello, K-on

Object.is(obj3.constructor, obj4.constructor);

obj4.constructor其實也就是FooConstructor.prototype.constructor，其實也是FooConstructor

Object.is(obj4.constructor, FooConstructor.prototype.constructor); // => true
Object.is(obj4.constructor, FooConstructor); // => true

回到Foo，看看是不是一樣。

var obj0 = new Foo("Foo");
Object.is(obj0.constructor, Foo.prototype.constructor); // => true
Object.is(obj0.constructor, Foo); // => true

Beingo!

關於類別方法

Foo建立的物件和FooConstructor建立的物件，對於方法的處理還有一些不同。Foo物件的方法是在obj.prototype上，另一個是在實例上。

var obj2 = new FooConstructor("Foo");
var obj0 = new Foo("Foo");
Object.getOwnPropertyNames(obj2); // => [ 'name', 'hello' ]
Object.getOwnPropertyNames(obj0); // => [ 'name']

obj2.__proto__.hello // => undefined
obj0.__proto__.hello // => [Function: hello]

作業 - FooConstructor和Foo改成同樣形式

其實FooConstructor可以改成跟Foo又更相似的行為，你能做到嗎？

絕對不是因為我懶！！

繼承

Bar = class extends Foo{
    bye(){
        console.log(`Bye Bye, ${this.name}`); 
    }
}

obj2 = new Bar("Disney");
obj2.hello(); // => Hello, Disney
obj2.bye(); // => Bye Bye, Disney

透過extends可以讓Bar繼承Foo。既然是語法糖，我們來檢查看看建立的物件是否符合Prototype Chain：

console.log(obj2.__proto__); // => Bar {}
console.log(obj2.__proto__.__proto__); // => Foo {}
Object.is(obj2.__proto__.__proto__, Foo.prototype); // => true
obj2 instanceof Foo // => true

看上去都沒問題呢！不過你知道函數Bar本身也多做了一些事情嗎？

Object.is(Bar.__proto__, Foo); // => true
Bar instanceof Function; //ture
Object.is(Bar.__proto__.__proto__, Function.prototype); // => true

對…Bar的原形鏈上不是直接到Function。當然拉，以上很多內容幾乎都可以魔改，但現在是否有更多概念了呢？

小節

透過class和extends語法糖，可以使用很像Java的語法建立、繼承物件。在重新看一次Bar範例：

Bar = class extends Foo{
    constructor(name){
        super(name);
        this.last_name = "Bar";
    }
    bye(){
        console.log(`Bye Bye, ${this.name} ${this.last_name}`); 
    }
}

obj2 = new Bar("Disney");
obj2.hello(); // => Hello, Disney
obj2.bye(); // => Bye Bye, Disney Bar

你都會了嗎？

我偷偷加了super()。不過相信已經懂Prototype chain的你能夠自己理解發生什麼事情

類別靜態方法(class static method): 寫在最後

最後在補充個我認為比較少用到的語法糖static。

物件方法的尋找，除了物件本身外，就是在原形鏈上尋找。但有時，會需要直接從類別呼叫，需要類別方法，這時static關鍵字就可以幫助到。

var Foo = class {
    constructor(name){
      this.name = name;
    }
    
  hello(){
     console.log(`Hello, ${this.name}`);
  }
  
  static helloWorld(){
      console.log("Hello, World");
  }
}

Foo.helloWorld(); // => Hello, World

使用static建立的類別靜態方法，之所以可以直接在類別呼叫，是因為其建立在的不是在prototye上，而是在類別本身上。

Foo.prototype.name = "Default";
Foo.prototype.hello(); // => Hello, Default
Foo.helloWorld(); // => Hello, World

注意到兩者呼叫方式的不同了嗎？這邊關於預設的屬性"Defalut"是怎麼運作的就不多做解釋了。來看看helloWorld，他會在Foo類別的屬性裡面:

Object.getOwnPropertyNames(Foo);
// [ 'length', 'prototype', 'helloWorld', 'name' ]

目前我想不到怎樣用比較好，以下例子可能不好。

你可能會希望像Ruby那樣建立物件，而不是使用new Operator。

※ 我以前有這種需求的時候，都是用工廠模式，然後函式名稱加個new的前綴😂。

s = String.new "Hello, World"

在了解後，你可以這樣做：

var Foo = class {
    constructor(name){
      this.name = name;
    }
    
  hello(){
     console.log(`Hello, ${this.name}`);
  }
  
  static new(){
      return new Foo(...arguments);
  }
}

obj0 = Foo.new("Dell");
obj0.hello();// => Hello, Dell

參考資料

  1. MDN: Classes ↩︎

  2. MDN: Function expression ↩︎

comments powered by Disqus