詳解JavaScript中的變量作用域和閉包
? 前言
JavaScript作為一門解釋執(zhí)行的腳本語(yǔ)言,其變量作用域與傳統(tǒng)編譯型語(yǔ)言有著明顯的區(qū)別。理解JavaScript的作用域與閉包對(duì)編寫(xiě)優(yōu)雅可靠的JavaScript代碼非常重要。
本文將詳細(xì)介紹JavaScript中變量的作用域規(guī)則,以及利用閉包實(shí)現(xiàn)的常見(jiàn)作用域應(yīng)用場(chǎng)景,幫助讀者進(jìn)一步掌握J(rèn)avaScript編程。
? 正文
JavaScript的作用域
JavaScript采用詞法作用域(lexical scope),也就是靜態(tài)作用域。函數(shù)的作用域在定義時(shí)就決定了。
主要的作用域規(guī)則:
- 函數(shù)內(nèi)部可以訪問(wèn)函數(shù)外部的變量
- 函數(shù)外部無(wú)法訪問(wèn)函數(shù)內(nèi)部的變量
- JavaScript沒(méi)有塊級(jí)作用域,只有函數(shù)作用域
const value = 'outer'; function foo() { const value = 'inner'; // 這里訪問(wèn)外部的value變量 }
JavaScript采用的是詞法作用域(lexical scope),也就是靜態(tài)作用域。這意味著變量的作用域在定義時(shí)就確定了,與代碼的執(zhí)行位置無(wú)關(guān)。
JavaScript的作用域有以下幾種情況:
- 全局作用域
在全局代碼中聲明的變量擁有全局作用域,在代碼的任何地方都可以訪問(wèn)。
- 函數(shù)作用域
每個(gè)函數(shù)都定義了一個(gè)新的作用域,該函數(shù)內(nèi)部可以訪問(wèn)全局變量以及函數(shù)的參數(shù)和局部變量。
- 塊級(jí)作用域
JavaScript 沒(méi)有塊級(jí)作用域,if代碼塊、for循環(huán)等并不能形成作用域,所以塊內(nèi)聲明的變量會(huì)泄漏到函數(shù)或全局作用域。
- 詞法作用域
內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)定義的變量,這稱為閉包。
- 動(dòng)態(tài)作用域
JavaScript沒(méi)有動(dòng)態(tài)作用域,函數(shù)的作用域在定義時(shí) Establish 而不會(huì)改變。
一個(gè)變量的作用域?qū)嶋H上是指該變量存在的區(qū)域。明確變量的作用域可以避免訪問(wèn)錯(cuò)誤或者命名沖突等問(wèn)題。
閉包的定義
閉包(closure)指一個(gè)函數(shù)及其相關(guān)的引用環(huán)境組合。簡(jiǎn)單來(lái)說(shuō),在一個(gè)函數(shù)內(nèi)部創(chuàng)建的函數(shù)可以訪問(wèn)到該函數(shù)的變量。
function outer() { const value = 'hello'; function inner() { console.log(value); // 訪問(wèn)外部函數(shù)的變量 } return inner; }
閉包的常見(jiàn)應(yīng)用場(chǎng)景
閉包的常見(jiàn)應(yīng)用場(chǎng)景包括:
- 封裝私有變量
- 模塊化編程
- 實(shí)現(xiàn)函數(shù)柯里化
- 緩存或記憶功能
- ...
? 結(jié)語(yǔ)
JavaScript的作用域與傳統(tǒng)編譯型語(yǔ)言有明顯區(qū)別,理解這些區(qū)別可以避免代碼編寫(xiě)中的問(wèn)題。
閉包是JavaScript中很重要的一個(gè)特性,合理利用閉包可以編寫(xiě)出更優(yōu)雅、高效的代碼。
要成為JavaScript高手,作用域和閉包都是必學(xué)的重要內(nèi)容。本文內(nèi)容可以幫助讀者加深對(duì)其理解。在未來(lái)的編碼中也要不斷 practise,進(jìn)一步掌握J(rèn)avaScript的精髓。?
到此這篇關(guān)于JavaScript中的變量作用域和閉包的文章就介紹到這了,更多相關(guān)js變量作用域和閉包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用Web?Component實(shí)現(xiàn)防篡改水印
Web?Component內(nèi)部有鉤子天然支持被篡改時(shí)被觸發(fā),用來(lái)防篡改非常方便,所以本文就將使用Web?Component實(shí)現(xiàn)防篡改水印,感興趣的小伙伴可以了解下2023-12-12uniapp使用uni-file-picker實(shí)現(xiàn)上傳功能
這篇文章主要介紹了uniapp使用uni-file-picker實(shí)現(xiàn)上傳功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-07-07JavaScript原型對(duì)象、構(gòu)造函數(shù)和實(shí)例對(duì)象功能與用法詳解
這篇文章主要介紹了JavaScript原型對(duì)象、構(gòu)造函數(shù)和實(shí)例對(duì)象功能與用法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο笙嚓P(guān)原型對(duì)象、構(gòu)造函數(shù)及實(shí)例對(duì)象的概念、功能與相關(guān)使用技巧,需要的朋友可以參考下2018-08-08List Information About the Binary Files Used by an Applicati
List Information About the Binary Files Used by an Application...2007-06-06JavaScript數(shù)組去重算法實(shí)例小結(jié)
這篇文章主要介紹了JavaScript數(shù)組去重算法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組去重相關(guān)的讀寫(xiě)、遍歷、比較、排序等操作及算法改進(jìn)相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05基于原生JS實(shí)現(xiàn)分頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生js實(shí)現(xiàn)分頁(yè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04js判斷背景圖片是否加載成功使用img的width實(shí)現(xiàn)
判斷背景圖片是否加載成功想必大家對(duì)此很陌生吧,會(huì)了之后就可以判斷css背景圖片了,具體判斷代碼如下,感興趣的朋友可以參考下哈2013-05-05