[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 設為了一個全新的空物件
    
#module #this
「你所不知道的 JS 」系列書籍閱讀心得,未閱讀前對於 JavaScript 皆是懵懵懂懂,因面試時發現自己很多觀念都不正確不清楚,所以這次一探 JavaScript 的運作方式。 * 系列一開始會先把大方向簡短的整理,之後會以每個項目做詳細的筆記






Related Posts

淺談 React Fiber 及其對 lifecycles 造成的影響

淺談 React Fiber 及其對 lifecycles 造成的影響

huli
從製作 visfest 2019 badge 認識 ObservableHQ

從製作 visfest 2019 badge 認識 ObservableHQ

ArvinH
使用 Prometheus 和 Grafana 打造 Flask Web App 監控預警系統

使用 Prometheus 和 Grafana 打造 Flask Web App 監控預警系統

kdchang


Comments