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

