深入解析JavaScript的閉包機(jī)制
JavaScript 變量可以是局部變量或全局變量。
私有變量可以用到閉包。
全局變量
函數(shù)可以訪問(wèn)是有函數(shù)內(nèi)部定義的變量,如:
實(shí)例
function myFunction() {
var a = 4;
return a * a;
}
函數(shù)也可以訪問(wèn)函數(shù)外部定義的變量,如:
實(shí)例
var a = 4;
function myFunction() {
return a * a;
}
后面一個(gè)實(shí)例中, a 是一個(gè) 全局 變量。
在web頁(yè)面中全局變量屬于 window 對(duì)象。
全局變量可應(yīng)用于頁(yè)面上的所有腳本。
在第一個(gè)實(shí)例中, a 是一個(gè) 局部 變量。
局部變量只能用于定義它函數(shù)內(nèi)部。對(duì)于其他的函數(shù)或腳本代碼是不可用的。
全局和局部變量即便名稱相同,它們也是兩個(gè)不同的變量。修改其中一個(gè),不會(huì)影響另一個(gè)的值。
Note
變量聲明是如果不使用 var 關(guān)鍵字,那么它就是一個(gè)全局變量,即便它在函數(shù)內(nèi)定義。
變量生命周期
全局變量的作用域是全局性的,即在整個(gè)JavaScript程序中,全局變量處處都在。
而在函數(shù)內(nèi)部聲明的變量,只在函數(shù)內(nèi)部起作用。這些變量是局部變量,作用域是局部性的;函數(shù)的參數(shù)也是局部性的,只在函數(shù)內(nèi)部起作用。
計(jì)數(shù)器困境
設(shè)想下如果你想統(tǒng)計(jì)一些數(shù)值,且該計(jì)數(shù)器在所有函數(shù)中都是可用的。
你可以使用全局變量,函數(shù)設(shè)置計(jì)數(shù)器遞增:
實(shí)例
var counter = 0;
function add() {
counter += 1;
}
add();
add();
add();
// 計(jì)數(shù)器現(xiàn)在為 3
計(jì)數(shù)器數(shù)值在執(zhí)行 add() 函數(shù)時(shí)發(fā)生變化。
但問(wèn)題來(lái)了,頁(yè)面上的任何腳本都能改變計(jì)數(shù)器,即便沒(méi)有調(diào)用 add() 函數(shù)。
如果我在函數(shù)內(nèi)聲明計(jì)數(shù)器,如果沒(méi)有調(diào)用函數(shù)將無(wú)法修改計(jì)數(shù)器的值:
實(shí)例
function add() {
var counter = 0;
counter += 1;
}
add();
add();
add();
// 本意是想輸出 3, 但事與愿違,輸出的都是 1 !
以上代碼將無(wú)法正確輸出,每次我調(diào)用 add() 函數(shù),計(jì)數(shù)器都會(huì)設(shè)置為 1。
JavaScript 內(nèi)嵌函數(shù)可以解決該問(wèn)題。
JavaScript 內(nèi)嵌函數(shù)
所有函數(shù)都能訪問(wèn)全局變量。
實(shí)際上,在 JavaScript 中,所有函數(shù)都能訪問(wèn)它們上一層的作用域。
JavaScript 支持嵌套函數(shù)。嵌套函數(shù)可以訪問(wèn)上一層的函數(shù)變量。
該實(shí)例中,內(nèi)嵌函數(shù) plus() 可以訪問(wèn)父函數(shù)的 counter 變量:
實(shí)例
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
如果我們能在外部訪問(wèn) plus() 函數(shù),這樣就能解決計(jì)數(shù)器的困境。
我們同樣需要確保 counter = 0 只執(zhí)行一次。
我們需要閉包。
JavaScript 閉包
還記得函數(shù)自我調(diào)用嗎?該函數(shù)會(huì)做什么?
實(shí)例
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 計(jì)數(shù)器為 3
實(shí)例解析
變量 add 指定了函數(shù)自我調(diào)用的返回字值。
自我調(diào)用函數(shù)只執(zhí)行一次。設(shè)置計(jì)數(shù)器為 0。并返回函數(shù)表達(dá)式。
add變量可以作為一個(gè)函數(shù)使用。非常棒的部分是它可以訪問(wèn)函數(shù)上一層作用域的計(jì)數(shù)器。
這個(gè)叫作 JavaScript 閉包。它使得函數(shù)擁有私有變量變成可能。
計(jì)數(shù)器受匿名函數(shù)的作用域保護(hù),只能通過(guò) add 方法修改。
Note
閉包是可訪問(wèn)上一層函數(shù)作用域里變量的函數(shù),即便上一層函數(shù)已經(jīng)關(guān)閉。
- 詳解js的作用域、預(yù)解析機(jī)制
- 深入解析JavaScript框架Backbone.js中的事件機(jī)制
- javascript垃圾收集機(jī)制與內(nèi)存泄漏詳細(xì)解析
- JavaScript對(duì)內(nèi)存分配及管理機(jī)制詳細(xì)解析
- ExtJs事件機(jī)制基本代碼模型和流程解析
- javascript深入理解js閉包
- 一分鐘理解js閉包
- JavaScript 匿名函數(shù)(anonymous function)與閉包(closure)
- 前端開(kāi)發(fā)必須知道的JS之閉包及應(yīng)用
- JavaScript解析機(jī)制與閉包原理實(shí)例詳解
相關(guān)文章
說(shuō)說(shuō)掌握J(rèn)avaScript語(yǔ)言的思想前提想學(xué)習(xí)js的朋友可以看看
無(wú)論是公司的同事還是外界的程序員朋友們,大部分人對(duì)JavaScript的高級(jí)應(yīng)用不甚了解,已有的知識(shí)架構(gòu)里會(huì)認(rèn)為JavaScript僅僅是一門腳本語(yǔ)言,其作用是給頁(yè)面做一些錦上添花的效果,比如表單驗(yàn)證等等。2009-04-04
深入理解JavaScript系列(42):設(shè)計(jì)模式之原型模式詳解
這篇文章主要介紹了深入理解JavaScript系列(42):設(shè)計(jì)模式之原型模式詳解,原型模式(prototype)是指用原型實(shí)例指向創(chuàng)建對(duì)象的種類,并且通過(guò)拷貝這些原型創(chuàng)建新的對(duì)象,需要的朋友可以參考下2015-03-03
5個(gè)最頂級(jí)jQuery圖表類庫(kù)插件【jquery插件庫(kù)】
這篇文章主要介紹了5個(gè)最頂級(jí)jQuery圖表類庫(kù)插件【jquery插件庫(kù)】,需要的朋友可以參考下2016-05-05
深入理解JavaScript系列(30):設(shè)計(jì)模式之外觀模式詳解
這篇文章主要介紹了深入理解JavaScript系列(30):設(shè)計(jì)模式之外觀模式詳解,外觀模式(Facade)為子系統(tǒng)中的一組接口提供了一個(gè)一致的界面,此模塊定義了一個(gè)高層接口,這個(gè)接口值得這一子系統(tǒng)更加容易使用,需要的朋友可以參考下2015-03-03
javascript創(chuàng)建對(duì)象、對(duì)象繼承的實(shí)用方式詳解
JavaScript中的對(duì)象是基于原型的。原型是對(duì)象的基礎(chǔ),它定義并實(shí)現(xiàn)了一個(gè)新對(duì)象所必須包含的成員列表,并被所有同類對(duì)象實(shí)例所共享。與其他語(yǔ)言中類的概念相比,原型更像是類的靜態(tài)成員。本文著重給大家介紹javascript創(chuàng)建對(duì)象、對(duì)象繼承的實(shí)用方式2016-03-03

