F2E

JavaScript-Patterns-2012-閱讀[1-1]

記錄閱讀 JavaScript-Patterns 2012 書籍（雖然有點舊，但還是值得來看一下～ 🤔
頁碼 p.10 ~ p.15

JavaScript重要觀念

  1. JavaScript是個物件導向語言：在JavaScript看到的程式碼，極可能都是個物件。主要有兩種物件：
    • Native（原生物件）
    • Host（宿主物件）
  2. 沒有Class
  3. 原型：是一個物件，當你建立的每個函式，都會自動取得一個prototype屬性指向一個新的空白物件。每個函式都有prototype屬性

撰寫可維護的程式碼

撰寫可維護的程式碼：閱讀程式碼的時間，比撰寫的時間還多 👍

  • 可讀性
  • 一致性
  • 可預料的
  • 看起來是同一人寫的
  • 文件化

減少全域變數

建立的全域變數，都會變成全域物件的屬性，造成命名衝突危機（這很嚴重 😨

  1. 關於變數

    • 區域變數：定義在函式內，函式外無法取得
    • 全域變數：定義在函式外，或沒宣告直接使用的變數

  2. var 的副作用

    • 用var創造出來的全域變數，不可以刪除
    • 不使用var，隱含創造出來的全域變數，可以刪除（因為隱含的全域變數不是真的變數，是全域物件的屬性，可用delete刪除
      1
      2
      3
      4
      5
      var global_first = 1;
      global_secont = 2;

      delete global_first;  // false 不可被刪除
      delete global_secont; // true  可被刪除

  3. 存取全域物件：在任何一段程式碼中，都可以透過 window 屬性存取全域物件

    • 可在任何層級的函式作用域中這麼做 😊
      1
      2
      3
      4
      // 讓你可以永遠拿到全域物件
      var global = (function() {
        return this;
      }());

  4. 單一var模式：在函示開頭使用單一個var述句，是非常有用的

    • 避免未宣告就使用，造成邏輯錯誤
    • 尋找變數時，只需要尋找同個地方
    • 幫助我們記得宣告變數，檢查全域變數
    • 記得宣告，同時賦予初始值。（宣告但為初始的變數，會被初始為undefined）

  5. Hoisting：分散的var造成的問題

    • 在函式內可有多個var敘述，並放在任何位置，這樣的行為跟在函式頂端宣告一模一樣。

    • 避免為此產生不必要的困惑，最好都在函式最上方宣告所有變數。（要記得 😠

      1
      2
      3
      4
      5
      6
      7
      myName = 'global'
      function func() {
        console.log(myName);  // undefined
        var myName = 'local';
        console.log(myName);  // local
      }
      func()

    • （參考這兩個，他們是一樣的）

      1
      2
      3
      4
      5
      6
      7
      8
      myName = 'global'
      function func() {
        var myName;           // 等於 var myName = undefined;
        console.log(myName);  // undefined
        myName = 'local';
        console.log(myName);  // local
      }
      func()

    同系列下篇：JavaScript-Patterns-2012-介紹[1-2]