javascript - js變數作用域的問題

Question

• 在研究js模組化寫法的時候產生的疑問，程式碼如下

#

    // 立即执行函数写法，保证外部不能访问到 count
    var module1 = (function() {
        var count = 0;
        var m1 = function() {
            return count;
        };
        return {
            m1: m1
        };
    })();
    // 如果现在想给 module1 添加新的方法
    module1 = (function(mod) {
        mod.m2 = function() {
            return count;
        }
        return mod;
    })(module1);
    console.log(module1.m1());//可以访问到 count
    // console.log(module1.m2());

我想知道為什麼 module1.m2() 存取不到 count ？

Answer 1

縷一縷思路：m1之所以能訪問到count，是因為m1跟count在同一個function裡聲明的，也就是他們在同一個作用域下，但是m2所在的function跟count可不是在同一個function作用域下的，也沒有存在function嵌function的關係，自然無法存取。

題主是覺得module1本身就跟count在同一個function下，所以給module1加個方法，這個方法就跟count在同一個作用域下？

Answer 2

因為詞法作用域的關係，JS的函數是靜態作用域，也就是說函數在定義的時候已經確定了裡面變數應該掛載到什麼符號，在你內部定義m1的時候，匿名函數傳回一個count，這個會在定義的時候確定了是這函數外部的var count=0。

而在你定義m2的時候，匿名函數回傳一個count，這個count的符號查找是先從它定義處內部查有沒有，如果沒有再查到上一層函數定義處，然後是最外處，也就是全域變量，所以這裡的count是個全域變數。

所以module1.m2()存取不到你在m1處定義的count變量，因為靜態詞法作用域的關係，m2是沒辦法追到那裡面的。