JS學習 - 隱藏內部實現規避衝突

一. 問題描述

  我們先來看一段代碼：

    function foo1() {
        function bar(a) {
            i=3;
            console.warn(a + i);
        }

        for (var i = 0; i < 10; i++) {
            bar(i);
        }
    }

  你覺得這個方法的運行結果是什麼呢？
答案是：無限循環

二. 我的想法

  這個怎麼會無限循環呢，我當時就是這個想法，for循環的i最大到10就停止循環了，怎麼就進入了無線循環？

  這裏就涉及到了一個問題：作用域。很明顯導致這個無線循環就是這個i=3導致的;

三. 問題解釋

  經過對JavaScript的學習瞭解，每個塊或函數都有自己的作用域，這和我們java或者c語言是一樣的，但是這裏不一樣的是，我們在bar方法裏面使用的這個i並不是定義在bar方法內部的，很明顯他是從別處調用的。

  根據我對js的學習，這個bar方法內部找不到這個i的定義，那麼就會到外一層作用域去尋找，而這個就是和java和c語言不同的地方，java和c只會向上去查找，而這個會去當前作用域外部無論上下去查找，然後就找到了for循環定義的這個i。

  也就是說我們在bar方法裏面使用的這個i其實就是for循環定義的i，所以無論for循環怎麼進行i++,最後都會在這個bar方法中變成3，也就永遠不會超過10，所以這裏就進入了無線循環。

四. 隱藏內部實現

  爲什麼說隱藏內部實現呢，也就是說，如果我們使用的東西沒有必要使用到外部的變量，那麼我們就在內部自己定義變量就可，這樣就可以規避這種衝突的實現。

  下面是一段正常的的代碼方法：

    function foo2() {
        function bar(a) {
            var i=3;
            console.warn(a + i);
        }

        for (var i = 0; i < 10; i++) {
            bar(i);
        }
    }