詳解JavaScript作用域、作用域鏈和閉包的用法
1. 作用域
作用域是指可訪問的變量和函數(shù)的集合。
作用域可分為全局作用域和局部作用域。
1.1 全局作用域
全局作用域是指最外層函數(shù)外面定義的變量和函數(shù)的集合。
換言之,這些最外層函數(shù)外面定義的變量和函數(shù)在任何地方都能訪問。
舉個(gè)例子:
// 最外層定義變量
var a = 1;
console.log(a); // 最外層可以訪問
function fnOne() { // 最外層函數(shù)
console.log(a); // 函數(shù)內(nèi)可以訪問
function fnTwo() { // 子函數(shù)
console.log(a); // 子函數(shù)內(nèi)也可以訪問
}
}
// 說(shuō)明
在最外面定義一個(gè)變量,不僅在最外面可以訪問,
在函數(shù)內(nèi)也能訪問,在函數(shù)的子函數(shù)內(nèi)也能訪問。
1.2 局部作用域
局部作用域是指在函數(shù)內(nèi)部定義的變量和函數(shù)的集合。
換言之,這些在函數(shù)內(nèi)部定義的變量和函數(shù),在函數(shù)外面是無(wú)法訪問的,只能在函數(shù)內(nèi)部(包括函數(shù)的子孫函數(shù))訪問。
舉個(gè)例子:
function fnThree() {
// 在函數(shù)內(nèi)定義變量
var b = 2;
console.log(b); // 函數(shù)內(nèi)部可以訪問
function fnFour() {
console.log(b); // 子函數(shù)內(nèi)也能訪問
}
}
// 函數(shù)外不能訪問
//console.log(b);
// 說(shuō)明
在函數(shù) fnThree 中定義一個(gè)變量 b ,在函數(shù)內(nèi)可以訪問,
在子函數(shù) fnFour 中也能訪問,但在 函數(shù) fnThree 外是不能訪問的。
2. 作用域鏈
從上面的兩個(gè)例子可以看出,最里層的子函數(shù)不僅可以訪問最外層函數(shù)內(nèi)的變量,還能訪問最外層函數(shù)外的全局變量。
這是因?yàn)椋趧?chuàng)建最外層函數(shù)的時(shí)候,會(huì)把全局作用域拿過(guò)來(lái),然后在創(chuàng)建子函數(shù)時(shí)候,又會(huì)把最外層的作用域(包括全局作用域)拿過(guò)來(lái),就這樣一環(huán)扣一環(huán),就形成了作用域鏈。
所以,作用域鏈?zhǔn)侵竷?nèi)層函數(shù)擁有外層函數(shù)到最外層(最外層函數(shù)外,全局)的所有作用域列表。
3. 閉包
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。(——百度百科)
從上面的第二個(gè)例子可知,函數(shù)外是不能訪問函數(shù)內(nèi)部定義的局部變量,但是閉包提供了可能。
舉個(gè)例子:
function User() {
// 定義私有變量
var userName = "default";
// 提供 setUserName() 方法
function setUserName(uName) {
userName = uName;
}
// 提供 getUserName() 方法
function getUserName() {
return userName;
}
// 將方法對(duì)外開放
return {
set: setUserName,
get: getUserName
}
}
var user1 = User();
user1.set('tom');
console.log(user1.get());
var user2 = User();
user2.set('jack');
console.log(user2.get());
// 說(shuō)明
User 函數(shù)內(nèi)部定義變量 uesrName ,
并在內(nèi)部定義兩個(gè)子函數(shù)操作 userName,
最后將兩個(gè)子函數(shù)返回(一個(gè)可直接放回,多個(gè)可放到對(duì)象中返回。)。
這樣,在函數(shù)外面可以調(diào)用子函數(shù)訪問函數(shù)內(nèi)部的變量,
這兩個(gè)子函數(shù)便實(shí)現(xiàn)了閉包的功能。
以上就是詳解JavaScript作用域、作用域鏈和閉包的用法的詳細(xì)內(nèi)容,更多關(guān)于JavaScript作用域、作用域鏈和閉包的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
淺析JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()
本文主要對(duì)JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()的作用進(jìn)行簡(jiǎn)要解析,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12
javascript中的return和閉包函數(shù)淺析
這篇文章主要介紹了javascript中的return和閉包函數(shù)淺析,至少可以讓你搞懂那么多()是什么意思,需要的朋友可以參考下2014-06-06
根據(jù)身份證號(hào)自動(dòng)輸出相關(guān)信息(籍貫,出身日期,性別)
為了減少客戶的在頁(yè)面的輸入,做了這個(gè)效果,他可以根據(jù)用戶輸入的身份證號(hào)輸出籍貫、出身日期、性別的相關(guān)信息,需要的朋友可以參考下2013-11-11
JS實(shí)現(xiàn)在文本指定位置插入內(nèi)容的簡(jiǎn)單示例
下面小編就為大家分享一篇JS實(shí)現(xiàn)在文本指定位置插入內(nèi)容的簡(jiǎn)單示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫效果實(shí)例
小程序日益增多的情況下,UI風(fēng)格顯得越來(lái)越重要,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
javascript兩種function的定義介紹及區(qū)別說(shuō)明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下,感興趣的朋友可以參考下,希望對(duì)你對(duì)你學(xué)習(xí)function的定義有所幫助2013-05-05
JavaScript獲取當(dāng)前網(wǎng)頁(yè)最后修改時(shí)間的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁(yè)最后修改時(shí)間的方法,涉及javascript中document.lastModified屬性的使用技巧,需要的朋友可以參考下2015-04-04

