新聞中心
本篇內(nèi)容主要講解“JavaScript閉包如何應(yīng)用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript閉包如何應(yīng)用”吧!
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的四方臺(tái)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
什么是閉包(Closure)
簡單講,閉包就是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。
MDN 上面這么說:閉包是一種特殊的對象。它由兩部分構(gòu)成:函數(shù),以及創(chuàng)建該函數(shù)的環(huán)境。環(huán)境由閉包創(chuàng)建時(shí)在作用域中的任何局部變量組成。
但是,網(wǎng)上找了好多資料,它們對閉包的定義也各有各樣,搞得我也不知道怎么去定義閉包了,所以干脆不去定義了,意會(huì)吧。
道可道,非常道;名可名,非常名。
產(chǎn)生一個(gè)閉包
創(chuàng)建閉包最常見方式,就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。下面例子中的 closure 就是一個(gè)閉包:
function func(){ var a = 1,b = 2; function closure(){ return a+b; } return closure; }
閉包的作用域鏈包含著它自己的作用域,以及包含它的函數(shù)的作用域和全局作用域。
閉包的注意事項(xiàng)
通常,函數(shù)的作用域及其所有變量都會(huì)在函數(shù)執(zhí)行結(jié)束后被銷毀。但是,在創(chuàng)建了一個(gè)閉包以后,這個(gè)函數(shù)的作用域就會(huì)一直保存到閉包不存在為止。
function makeAdder(x) { return function(y) { return x + y; }; } var add5 = makeAdder(5); var add10 = makeAdder(10); console.log(add5(2)); // 7 console.log(add10(2)); // 12 // 釋放對閉包的引用 add5 = null; add10 = null;
add5 和 add10 都是閉包。它們共享相同的函數(shù)定義,但是保存了不同的環(huán)境。在 add5 的環(huán)境中,x 為 5。而在 add10 中,x 則為 10。***通過 null 釋放了 add5 和 add10 對閉包的引用。
在javascript中,如果一個(gè)對象不再被引用,那么這個(gè)對象就會(huì)被垃圾回收機(jī)制回收;
如果兩個(gè)對象互相引用,而不再被第3者所引用,那么這兩個(gè)互相引用的對象也會(huì)被回收。
閉包只能取得包含函數(shù)中任何變量的***一個(gè)值,這是因?yàn)殚]包所保存的是整個(gè)變量對象,而不是某個(gè)特殊的變量。
function test(){ var arr = []; for(var i = 0;i < 10;i++){ arr[i] = function(){ return i; }; } for(var a = 0;a < 10;a++){ console.log(arr[a]()); } } test(); // 連續(xù)打印 10 個(gè) 10
對于上面的情況,如果我們改變代碼如下:
function test(){ var arr = []; for(let i = 0;i < 10;i++){ // 僅在這里作出了改動(dòng) arr[i] = function(){ return i; }; } for(var a = 0;a < 10;a++){ console.log(arr[a]()); } } test(); // 打印 0 到 9
對于上面兩種代碼的解釋,請看我在 segmentfault 上面的提問:鏈接
閉包中的 this 對象
var name = "The Window"; var obj = { name: "My Object", getName: function(){ return function(){ return this.name; }; } }; console.log(obj.getName()()); // The Window
obj.getName()()實(shí)際上是在全局作用域中調(diào)用了匿名函數(shù),this指向了window。這里要理解函數(shù)名與函數(shù)功能(或者稱函數(shù)值)是分割開的,不要認(rèn)為函數(shù)在哪里,其內(nèi)部的this就指向哪里。匿名函數(shù)的執(zhí)行環(huán)境具有全局性,因此其 this 對象通常指向 window。
var name = "The Window"; var obj = { name: "My Object", getName: function(){ var that = this; return function(){ return that.name; }; } }; console.log(obj.getName()()); // My Object
閉包的應(yīng)用
應(yīng)用閉包的主要場合是:設(shè)計(jì)私有的方法和變量。
任何在函數(shù)中定義的變量,都可以認(rèn)為是私有變量,因?yàn)椴荒茉诤瘮?shù)外部訪問這些變量。私有變量包括函數(shù)的參數(shù)、局部變量和函數(shù)內(nèi)定義的其他函數(shù)。
把有權(quán)訪問私有變量的公有方法稱為特權(quán)方法(privileged method)。
function Animal(){ // 私有變量 var series = "哺乳動(dòng)物"; function run(){ console.log("Run!!!"); } // 特權(quán)方法 this.getSeries = function(){ return series; }; }
模塊模式(The Module Pattern):為單例創(chuàng)建私有變量和方法。
單例(singleton):指的是只有一個(gè)實(shí)例的對象。JavaScript 一般以對象字面量的方式來創(chuàng)建一個(gè)單例對象。
var singleton = { name: "percy", speak:function(){ console.log("speaking!!!"); }, getName: function(){ return this.name; } };
上面是普通模式創(chuàng)建的單例,下面使用模塊模式創(chuàng)建單例:
var singleton = (function(){ // 私有變量 var age = 22; var speak = function(){ console.log("speaking!!!"); }; // 特權(quán)(或公有)屬性和方法 return { name: "percy", getAge: function(){ return age; } }; })();
匿名函數(shù)***的用途是創(chuàng)建閉包,并且還可以構(gòu)建命名空間,以減少全局變量的使用。從而使用閉包模塊化代碼,減少全局變量的污染。
var objEvent = objEvent || {}; (function(){ var addEvent = function(){ // some code }; function removeEvent(){ // some code } objEvent.addEvent = addEvent; objEvent.removeEvent = removeEvent; })();
在這段代碼中函數(shù) addEvent 和 removeEvent 都是局部變量,但我們可以通過全局變量 objEvent 使用它,這就大大減少了全局變量的使用,增強(qiáng)了網(wǎng)頁的安全性。
一個(gè)閉包計(jì)數(shù)器
var countNumber = (function(){ var num = 0; return function(){ return ++num; }; })();
閉包的缺陷
閉包的缺點(diǎn)就是常駐內(nèi)存會(huì)增大內(nèi)存使用量,并且使用不當(dāng)很容易造成內(nèi)存泄露。
如果不是因?yàn)槟承┨厥馊蝿?wù)而需要閉包,在沒有必要的情況下,在其它函數(shù)中創(chuàng)建函數(shù)是不明智的,因?yàn)殚]包對腳本性能具有負(fù)面影響,包括處理速度和內(nèi)存消耗。
***再來一些有關(guān)閉包的面試題
下面代碼中,標(biāo)記 ? 的地方輸出分別是什么?
function fun(n,o){ console.log(o); return { fun: function(m){ return fun(m,n); } }; } var a = fun(0); // ? a.fun(1); // ? a.fun(2); // ? a.fun(3); // ? var b = fun(0).fun(1).fun(2).fun(3); // ? var c = fun(0).fun(1); // ? c.fun(2); // ? c.fun(3); // ?
undefined 0 0 0 undefined, 0, 1, 2 undefined, 0 1 1
到此,相信大家對“JavaScript閉包如何應(yīng)用”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
當(dāng)前題目:JavaScript閉包如何應(yīng)用
本文網(wǎng)址:http://ef60e0e.cn/article/jddjci.html