詳解JavaScript作用域、作用域鏈和閉包的用法
1. 作用域
作用域是指可訪問的變量和函數(shù)的集合。
作用域可分為全局作用域和局部作用域。
1.1 全局作用域
全局作用域是指最外層函數(shù)外面定義的變量和函數(shù)的集合。
換言之,這些最外層函數(shù)外面定義的變量和函數(shù)在任何地方都能訪問。
舉個例子:
// 最外層定義變量 var a = 1; console.log(a); // 最外層可以訪問 function fnOne() { // 最外層函數(shù) console.log(a); // 函數(shù)內可以訪問 function fnTwo() { // 子函數(shù) console.log(a); // 子函數(shù)內也可以訪問 } } // 說明 在最外面定義一個變量,不僅在最外面可以訪問, 在函數(shù)內也能訪問,在函數(shù)的子函數(shù)內也能訪問。
1.2 局部作用域
局部作用域是指在函數(shù)內部定義的變量和函數(shù)的集合。
換言之,這些在函數(shù)內部定義的變量和函數(shù),在函數(shù)外面是無法訪問的,只能在函數(shù)內部(包括函數(shù)的子孫函數(shù))訪問。
舉個例子:
function fnThree() { // 在函數(shù)內定義變量 var b = 2; console.log(b); // 函數(shù)內部可以訪問 function fnFour() { console.log(b); // 子函數(shù)內也能訪問 } } // 函數(shù)外不能訪問 //console.log(b); // 說明 在函數(shù) fnThree 中定義一個變量 b ,在函數(shù)內可以訪問, 在子函數(shù) fnFour 中也能訪問,但在 函數(shù) fnThree 外是不能訪問的。
2. 作用域鏈
從上面的兩個例子可以看出,最里層的子函數(shù)不僅可以訪問最外層函數(shù)內的變量,還能訪問最外層函數(shù)外的全局變量。
這是因為,在創(chuàng)建最外層函數(shù)的時候,會把全局作用域拿過來,然后在創(chuàng)建子函數(shù)時候,又會把最外層的作用域(包括全局作用域)拿過來,就這樣一環(huán)扣一環(huán),就形成了作用域鏈。
所以,作用域鏈是指內層函數(shù)擁有外層函數(shù)到最外層(最外層函數(shù)外,全局)的所有作用域列表。
3. 閉包
閉包就是能夠讀取其他函數(shù)內部變量的函數(shù)。(——百度百科)
從上面的第二個例子可知,函數(shù)外是不能訪問函數(shù)內部定義的局部變量,但是閉包提供了可能。
舉個例子:
function User() { // 定義私有變量 var userName = "default"; // 提供 setUserName() 方法 function setUserName(uName) { userName = uName; } // 提供 getUserName() 方法 function getUserName() { return userName; } // 將方法對外開放 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()); // 說明 User 函數(shù)內部定義變量 uesrName , 并在內部定義兩個子函數(shù)操作 userName, 最后將兩個子函數(shù)返回(一個可直接放回,多個可放到對象中返回。)。 這樣,在函數(shù)外面可以調用子函數(shù)訪問函數(shù)內部的變量, 這兩個子函數(shù)便實現(xiàn)了閉包的功能。
以上就是詳解JavaScript作用域、作用域鏈和閉包的用法的詳細內容,更多關于JavaScript作用域、作用域鏈和閉包的資料請關注腳本之家其它相關文章!
相關文章
innertext , insertadjacentelement , insertadjacenthtml , ins
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等區(qū)別...2007-06-06Javascript異步編程async實現(xiàn)過程詳解
這篇文章主要介紹了Javascript異步編程async實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04js如何刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組實例代碼
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結構,下面這篇文章主要給大家介紹了關于js如何刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09