快捷導(dǎo)航

Javascript閉包用法實(shí)例分析

更新時(shí)間：2015年01月23日 08:53:50 投稿：shichen2014

這篇文章主要介紹了Javascript閉包的概念及用法,以實(shí)例形式深入淺出的分析了閉包的功能及使用時(shí)的注意事項(xiàng),非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例分析了Javascript閉包的概念及用法。分享給大家供大家參考。具體如下：

提到閉包，想必大家都早有耳聞，下面說(shuō)下我的簡(jiǎn)單理解。
說(shuō)實(shí)話(huà)平時(shí)工作中實(shí)際手動(dòng)寫(xiě)閉包的場(chǎng)景并不多，但是項(xiàng)目中用到的第三方框架和組件或多或少用到了閉包。
所以，了解閉包是非常必要的。呵呵...

一、什么是閉包

簡(jiǎn)而言之，就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
由于JS變量作用域的特性，外部不能訪問(wèn)內(nèi)部變量，內(nèi)部可以外部變量。

二、使用場(chǎng)景

1. 實(shí)現(xiàn)私有成員。
2. 保護(hù)命名空間，避免污染全局變量。
3. 緩存變量。

先看一個(gè)封裝的例子：

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

var person = function () {
// 變量作用域?yàn)楹瘮?shù)內(nèi)部，外部無(wú)法訪問(wèn)
var name = "default";

    return {
        getName: function () {
            return name;
        },
        setName: function (newName) {
            name = newName;
        }
    }
}();

console.log(person.name); // 直接訪問(wèn)，結(jié)果為：undefined
console.log(person.getName()); // 結(jié)果為：default
console.log(person.setName("langjt"));
console.log(person.getName()); // 結(jié)果為：langjt

再看循環(huán)中常用閉包解決引用外部變量問(wèn)題：

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

var aLi = document.getElementsByTagName('li');

for (var i=0, len=aLi.length; i<len; i++) {

   aLi[i].onclick = function() {

     alert(i); // 無(wú)論點(diǎn)擊哪個(gè)<li>元素，彈出的值都為len，表明這里的i和在for之后打印i的值是一樣的。

   };

}

使用閉包后：

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

var aLi = document.getElementsByTagName('li');

for (var i=0, len=aLi.length; i<len; i++) {

  aLi[i].onclick = (function(i) {

    return function() {

      alert(i); // 此時(shí)點(diǎn)擊<li>元素，就會(huì)彈出對(duì)應(yīng)的下標(biāo)了。

    }

  })(i);

}

三、注意事項(xiàng)

1. 內(nèi)存泄漏

由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問(wèn)題。
比如：

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

function foo() {

   var oDiv = document.getElementById(‘J_DIV');

   var id = oDiv.id;

   oDiv.onclick = function() {

     // alert(oDiv.id); 這里存在循環(huán)引用，IE低版本頁(yè)面關(guān)閉后oDiv仍在內(nèi)存中。所以盡可能緩存基本類(lèi)型而不是對(duì)象。

     alert(id);

   };

   oDiv = null;

}

2. 變量命名

如果內(nèi)部函數(shù)的變量和外部函數(shù)的變量名相同時(shí)，那么內(nèi)部函數(shù)再也無(wú)法指向外部函數(shù)那個(gè)同名的變量。
比如：

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

function foo(num) {

  return function(num) {

    console.log(num); 

  }

}

var f = new foo(9);

f(); // undefined

其實(shí)上面的用法，專(zhuān)業(yè)術(shù)語(yǔ)叫函數(shù)柯里化(Currying)，就是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)（最初函數(shù)的第一個(gè)參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。本質(zhì)上也利用了閉包可以緩存的特性，比如：

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

var adder = function(num) {
    return function(y) {
        return num+y;
    };
};

var inc = adder(1);
var dec = adder(-1);
//inc, dec現(xiàn)在是兩個(gè)新的函數(shù),作用是將傳入的參數(shù)值 (+/‐)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102

再比如阿里玉伯的seaJS源碼中：

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

/**
* util-lang.js - The minimal language enhancement
*/
function isType(type) {
return function(obj) {
return {}.toString.call(obj) == "[object " + type + "]"
}
}

var isObject = isType("Object");
var isString = isType("String");

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: