javascript筆記之匿名函數(shù)和閉包
本文介紹了js匿名函數(shù)和閉包的相關(guān)內(nèi)容,供大家參考,具體內(nèi)容如下
匿名函數(shù)
<script type="text/javascript"> //function(){}//會(huì)報(bào)錯(cuò) var fun = function(){};//將匿名函數(shù)賦值給變量 (function(){})();//匿名函數(shù)自執(zhí)行 function(){ return function(){};//函數(shù)里的匿名函數(shù) } </script>
閉包
閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù),創(chuàng)建閉包的常見(jiàn)的方式,就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù),通過(guò)另一個(gè)函數(shù)訪問(wèn)這個(gè)函數(shù)的局部變量
<script type="text/javascript"> //通過(guò)閉包可以返回局部變量 function box() { var user = 'Lee'; return function () { //通過(guò)匿名函數(shù)返回box()局部變量 return user; }; } console.log(box()()); //通過(guò)box()()來(lái)直接調(diào)用匿名函數(shù)返回值 var b = box(); console.log(b()); //另一種調(diào)用匿名函數(shù)返回值 //通過(guò)閉包可以實(shí)現(xiàn)局部變量的累加 function box() { var age = 100; return function () { age ++; return age; } } var b = box(); //獲得函數(shù) console.log(b()); //調(diào)用匿名函數(shù) console.log(b()); //第二次調(diào)用匿名函數(shù),實(shí)現(xiàn)累加 </script>
使用閉包有一個(gè)優(yōu)點(diǎn),也是它的缺點(diǎn):就是可以把局部變量駐留在內(nèi)存中,可以避免使用全局變量。(全局變量污染導(dǎo)致應(yīng)用程序不可預(yù)測(cè)性,每個(gè)模塊都可調(diào)用必將引來(lái)災(zāi)難,所以推薦使用私有的,封裝的局部變量)。由于閉包里作用域返回的局部變量資源不會(huì)被立刻銷毀回收,所以可能會(huì)占用更多的內(nèi)存。過(guò)度使用閉包會(huì)導(dǎo)致性能下降,建議在非常有必要的時(shí)候才使用閉包。
循環(huán)里的閉包
<script type="text/javascript"> function box() { var arr = []; for (var i = 0; i < 5; i++) { arr[i] = function () { return i; }; } return arr; } var b = box(); //得到函數(shù)數(shù)組 console.log(b.length); //得到函數(shù)集合長(zhǎng)度 for (var i = 0; i < b.length; i++) { console.log(b[i]()); //輸出每個(gè)函數(shù)的值,都是最后一個(gè)值 } </script>
box()已執(zhí)行完畢,i早已變成5,而返回的函數(shù)保存的變量都是i,所以最終的結(jié)果就是5個(gè)5
循環(huán)里的閉包--修改
<script type="text/javascript"> function box() { var arr = []; for (var i = 0; i < 5; i++) { arr[i] = (function (num) { return function () { //返回函數(shù) return num; } })(i); /* //相當(dāng)于: arr[i] = (function () { var num = i;//定義一個(gè)局部變量 return function () { return num; } })(); */ } return arr; } var b = box(); //得到函數(shù)數(shù)組 for (var i = 0; i < b.length; i++) { console.log(b[i]()); //0,1,2,3,4 } </script>
通過(guò)在box作用域里新建塊級(jí)作用域來(lái)是每個(gè)返回函數(shù)保存的變量都不一樣
閉包中的this對(duì)象
而閉包卻在運(yùn)行時(shí)指向window的,因?yàn)殚]包并不屬于這個(gè)對(duì)象的屬性或方法。
<script type="text/javascript"> var user = 'The Window'; var obj = { user : 'The Object', getUserFunction : function () { return function () { //閉包不屬于obj,里面的this指向window return this.user; }; } }; console.log(obj.getUserFunction()()); //The window //可以強(qiáng)制指向某個(gè)對(duì)象 console.log(obj.getUserFunction().call(obj)); //The Object /* //也可以從上一個(gè)作用域中得到對(duì)象 getUserFunction : function () { var that = this; //從對(duì)象的方法里得對(duì)象 return function () { return that.user; }; } */ </script>
模仿塊級(jí)作用域
JavaScript沒(méi)有塊級(jí)語(yǔ)句的作用域,if () {} for () {}等沒(méi)有作用域
<script type="text/javascript"> //使用塊級(jí)作用域(私有作用域)改寫 function box(count) { (function () { for (var i = 0; i<count; i++) {} })(); console.log(i); //報(bào)錯(cuò),無(wú)法訪問(wèn) } box(2); </script>
使用了塊級(jí)作用域(私有作用域)后,匿名函數(shù)中定義的任何變量,都會(huì)在執(zhí)行結(jié)束時(shí)被銷毀。在全局作用域中使用塊級(jí)作用域可以減少閉包占用的內(nèi)存問(wèn)題,因?yàn)闆](méi)有指向匿名函數(shù)的引用。只要函數(shù)執(zhí)行完畢,就可以立即銷毀其作用域鏈了。
私有變量
JavaScript沒(méi)有私有屬性的概念;所有的對(duì)象屬性都是公有的。不過(guò),卻有一個(gè)私有變量的概念。任何在函數(shù)中定義的變量,都可以認(rèn)為是私有變量,因?yàn)椴荒茉诤瘮?shù)的外部訪問(wèn)這些變量
而通過(guò)函數(shù)內(nèi)部創(chuàng)建一個(gè)閉包,那么閉包通過(guò)自己的作用域鏈也可以訪問(wèn)這些變量。而利用這一點(diǎn),可以創(chuàng)建用于訪問(wèn)私有變量的公有方法。
<script type="text/javascript"> function Box() { var age = 100; //私有變量 function run() { //私有函數(shù) return '運(yùn)行中...'; } this.get = function () { //對(duì)外公共的特權(quán)方法,閉包(函數(shù)訪問(wèn)了不屬于對(duì)象作用域的age和run方法) return age + run(); }; } var box = new Box(); console.log(box.get()); </script>
靜態(tài)私有變量
上面的私有變量在每次實(shí)例化對(duì)象的時(shí)候都會(huì)重新初始化,通過(guò)塊級(jí)作用域(私有作用域)中定義私有變量或函數(shù),同樣可以創(chuàng)建對(duì)外公共的特權(quán)方法。。
<script type="text/javascript"> (function () { var age = 100;//靜態(tài)私有變量 function run() { return '運(yùn)行中...'; } Box = function () {}; //構(gòu)造方法,沒(méi)有使用var,全局函數(shù) Box.prototype.go = function () { //原型方法 return age + run(); }; })(); var box = new Box(); console.log(box.go()); </script>
模塊模式
<script type="text/javascript"> var box = function () { //box是一個(gè)模塊 var age = 100; function run() { return '運(yùn)行中...'; } return { //直接返回對(duì)象 go : function () { return age + run(); } }; }(); </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
兩個(gè)listbox實(shí)現(xiàn)選項(xiàng)的添加刪除和搜索
listbox竟然可以實(shí)現(xiàn)選項(xiàng)的添加刪除和搜索不可思議吧,至于采用什么樣的方法實(shí)現(xiàn)的,具體代碼祥看本文嘍,或許可以幫助到你2013-03-03layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置
今天小編就為大家分享一篇layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript前端下載后臺(tái)傳來(lái)的文件流代碼實(shí)例
這篇文章主要介紹了Javascript前端下載后臺(tái)傳來(lái)的文件流代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08在Bootstrap開(kāi)發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法
這篇文章主要介紹了在Bootstrap開(kāi)發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法,這個(gè)可以提高數(shù)據(jù)的錄入方便,特別是在一些簡(jiǎn)單業(yè)務(wù)的明細(xì)數(shù)據(jù)的時(shí)候,看起來(lái)會(huì)比彈出窗口錄入方便一些,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10前端開(kāi)發(fā)必須知道的JS之閉包及應(yīng)用
本文講的是函數(shù)閉包,不涉及對(duì)象閉包(如用with實(shí)現(xiàn))。如果你覺(jué)得我說(shuō)的有偏差,歡迎拍磚,歡迎指教。2010-07-07JavaScript中的常見(jiàn)問(wèn)題解決方法(亂碼,IE緩存,代理)
這篇文章主要是對(duì)JavaScript中的常見(jiàn)問(wèn)題解決方法(亂碼,IE緩存,代理)進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所 幫助2013-11-11Webpack實(shí)現(xiàn)多頁(yè)面打包的方法步驟
本文主要介紹了Webpack實(shí)現(xiàn)多頁(yè)面打包的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01重構(gòu)Javascript代碼示例(重構(gòu)前后對(duì)比)
回顧頭來(lái)看看那些Javascript腳本,有寫得不太理想,過(guò)于復(fù)雜。現(xiàn)抽取出來(lái),重構(gòu)它們,想學(xué)習(xí)javascript重構(gòu)的朋友可以參考下啊,網(wǎng)本文可以幫助你的2013-01-01