[08] JavaScript 入門 - 模組、this

keywords:module,this

模組 （ Module ）

搭配上一章最後講的閉包，在 JavaScript 最常見的用法是模組模式（ module pattern ）。
先來看範例：

    function Vehicle(){
      let name,color;

      function moveOn(name,color){
        vehicleName = name;
        vehicleColor = color;

        console.log('name:',vehicleName);
        console.log('color:',vehicleColor);
      }

      const publicAPI = {
        move: moveOn
      };

      return publicAPI;
    };

    const tesla = Vehicle();
    tesla.move('car','red');  // name: car color: red

• Vehicle() 函式是一個外層範疇，持有變數 name,color ，還有 moveOn 函式，這些都是 Vehicle 模組內部的部分，外層是無法直接調用或使用的。
• 執行 Vehicle() 會建立 Vehicle 模組的一個實體（ instance ）即 const tesla = Vehicle(); 會有一整個新的範疇被創造出來，因此有一份全新的內層變數（ name,color ）/ 函式（moveOn）出現，且會將這個實體指定給 tesla。
• 🚩Vehicle 只是一個函式，並非可被實體化的類別 ( class )

this 識別字

• this 常被認為與物件導向模式（ object-oriented patterns ）有關，但實際上是不同的機制。

• 一個函式裡有一個 this 參考，這個 this 參考通常指向一個 object ， this 指向什麼得檢視目標函式是如何被呼叫的， this 並不是參考到該函式本身
  先來看範例：

    function f1() {
      console.log( this.bar )
    }
  
    var bar = 'global'
  
    const obj1 = {
      bar: 'obj1',
      f1: f1
    }
  
    const obj2 = {
      bar: 'obj2'
    }
  
    f1()  // global  
    非 strict 模式下， this 被設定為全域物件
    strict 模式下，　this 會是 undefined
  
    obj1.f1() // obj1
    將 this 設為了 obj1 物件
  
    f1.call(obj2) // obj2
    將 this 設為了 obj2 物件
  
    new f1() // undefined
    將 this 設為了一個全新的空物件