快捷導(dǎo)航

Javascript學(xué)習(xí)筆記之函數(shù)篇（三） : 閉包和引用

更新時(shí)間：2014年11月23日 10:41:37 投稿：hebedich

本系列好久沒更新了，今天重新拿過來，繼續(xù)前面未完成的事項(xiàng)，本文我們就來談?wù)凧avascript 中一個(gè)最重要的特性--閉包的使用引用。

Javascript 中一個(gè)最重要的特性就是閉包的使用。因?yàn)殚]包的使用，當(dāng)前作用域總可以訪問外部的作用域。因?yàn)?Javascript 沒有塊級(jí)作用域，只有函數(shù)作用域，所以閉包的使用與函數(shù)是緊密相關(guān)的。

模擬私有變量

復(fù)制代碼代碼如下:

function Counter(start) {

    var count = start;

    return {

        increment: function() {

            count++;

        },

        get: function() {

            return count;

        }

    }

}

var foo = Counter(4);

foo.increment();

foo.get(); // 5

這里 Counter 返回兩個(gè)閉包：函數(shù) increment 和 get。這兩個(gè)函數(shù)一直保持著對(duì) Counter 作用域的訪問，因此它們能一直訪問到定義在 Counter 作用域的變量 count。

私有變量的工作機(jī)制

由于 Javascript 不可以對(duì)作用域賦值和引用，所以在上例中，是沒有辦法在外部直接訪問內(nèi)部私有變量 count。唯一的方法就是通過定義閉包來訪問。

復(fù)制代碼代碼如下:

var foo = new Counter(4);

foo.hack = function() {

    count = 1337;

};

上面的代碼不會(huì)改變 Counter 作用域內(nèi)的 count 變量值，因?yàn)?hack 沒有在 Counter 內(nèi)定義。上面這段代碼只會(huì)創(chuàng)建或者覆蓋全局變量 count。

循環(huán)內(nèi)的閉包

一個(gè)最容易犯的錯(cuò)誤就是在循環(huán)內(nèi)使用閉包。

復(fù)制代碼代碼如下:

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

    setTimeout(function() {

        console.log(i);  

    }, 1000);

}

上面這段代碼不會(huì)輸出0到9，而是連續(xù)輸出10次10。
上面的匿名會(huì)一直保持一個(gè)對(duì)變量 i 的引用。當(dāng)調(diào)用 console.log 函數(shù)開始輸出時(shí)，這是循環(huán)已經(jīng)結(jié)束，而變量 i 已經(jīng)為10了。
為了避免上面的錯(cuò)誤發(fā)生，我們需要在每次循環(huán)時(shí)為變量 i 值創(chuàng)建一個(gè)拷貝。

避免引用錯(cuò)誤

為了復(fù)制循環(huán)中變量的值，最好的方式是在外層加一個(gè)匿名的立刻執(zhí)行函數(shù)。

復(fù)制代碼代碼如下:

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

    (function(e) {

        setTimeout(function() {

            console.log(e);  

        }, 1000);

    })(i);

}

這個(gè)外部的匿名函數(shù)接收循環(huán)變量 i 作為第一個(gè)參數(shù)，并將其值拷貝至它自身的參數(shù) e。
外部的匿名函數(shù)將參數(shù) e 再傳遞給 setTimeout，因此 setTimeout 有了指向參數(shù) e 的引用。而且這個(gè)參數(shù) e 的值不會(huì)因?yàn)橥獠康难h(huán)改變而改變。

還有另外一個(gè)方法可以實(shí)現(xiàn)同樣的效果，就是在 setTimeout 內(nèi)的匿名函數(shù)中再返回一個(gè)匿名函數(shù)：

復(fù)制代碼代碼如下:

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

    setTimeout((function(e) {

        return function() {

            console.log(e);

        }

    })(i), 1000)

}

此外，通過 bind 方法也可以實(shí)現(xiàn)。

復(fù)制代碼代碼如下:

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

    setTimeout(console.log.bind(console, i), 1000);

}

文章最后我們來總結(jié)下：

（1）閉包是一種設(shè)計(jì)原則，它通過分析上下文，來簡(jiǎn)化用戶的調(diào)用，讓用戶在不知曉的情況下，達(dá)到他的目的；
（2）網(wǎng)上主流的對(duì)閉包剖析的文章實(shí)際上是和閉包原則反向而馳的，如果需要知道閉包細(xì)節(jié)才能用好的話，這個(gè)閉包是設(shè)計(jì)失敗的；
（3）盡量少學(xué)習(xí)。

您可能感興趣的文章: