JavaScript中的變量作用域介紹
對(duì)于變量的作用域(scope),C、Java等語(yǔ)言采取的是“block scope”的方式。與之不同,JavaScript所采取的是“function scope”的方式 — 變量的作用域僅由所處的function決定,與if、for等邏輯塊無(wú)關(guān)。比如,以下這個(gè)例子展示了JavaScript中與C、Java等語(yǔ)言不一樣的行為:
function(){
var s = 42;//s is visible throughout function
if (s > 3) {
var x = "test";//x is visible throughout function
for(var i=0; i<10; i++){
console.log(i);
}
console.log(i);//i is visible throughout function
}
console.log(i);
console.log(x);
}
在C、Java等“block scope”的語(yǔ)言中,if語(yǔ)句、for語(yǔ)句等邏輯塊結(jié)束后,在這些邏輯塊內(nèi)部定義的變量將會(huì)被銷毀。JavaScript與之不同,只要一個(gè)變量定義在某function內(nèi),那么整個(gè)function內(nèi)的所有代碼均可訪問(wèn)到該變量,即使這些代碼在變量定義之前:
function(){
console.log(a);//undefined
var a = "test";
console.log(a);//test
}
在上述例子中,如果function中a從未被定義,那么console.log(a)將拋出ReferenceError。當(dāng)function中對(duì)a進(jìn)行定義后,即使這個(gè)定義在a變量調(diào)用語(yǔ)句之后,對(duì)a的調(diào)用也屬于合法操作(如果對(duì)a變量的定義發(fā)生在調(diào)用語(yǔ)句之后,那么調(diào)用語(yǔ)句中a變量的值為undefined)。事實(shí)上,在function內(nèi)用var關(guān)鍵詞進(jìn)行定義的所有變量,其定義操作都會(huì)被提至function的開(kāi)頭(賦值操作依然留在var定義的那一行),這在JavaScript中稱之為hoisting。比如,上述代碼就等價(jià)于:
function(){
var a;
console.log(a);//undefined
a = "test";
console.log(a);//test
}
變量的作用域鏈
聯(lián)系JavaScript中變量的儲(chǔ)存,可以很好的理解JS中的“function scope”與hoisting。由于變量是儲(chǔ)存在全局對(duì)象或者函數(shù)調(diào)用對(duì)象上的,因此當(dāng)在function中定義變量時(shí),無(wú)論這個(gè)變量定義在function的什么地方,這次function調(diào)用所使用的函數(shù)調(diào)用對(duì)象中必然會(huì)出現(xiàn)一個(gè)與此變量同名的屬性。如此一來(lái),function中的任何地方都可以訪問(wèn)到該變量。
涉及到函數(shù)調(diào)用,JavaScript中還有一個(gè)更有趣的概念:變量的作用域鏈 — 由于變量是儲(chǔ)存在全局對(duì)象或者函數(shù)調(diào)用對(duì)象上的,因此在訪問(wèn)變量時(shí),可以從多個(gè)對(duì)象上獲取值。以下面的代碼為例:
var x = "test";
function(){
//level-1 function
var x = "temp";
function(){
//level-2 function
var x = "real";
//try to access x here. x will be "real".
}
}
在上述代碼中2級(jí)函數(shù)(level-2 function)的內(nèi)部,當(dāng)試圖訪問(wèn)x變量時(shí),程序可以從3個(gè)對(duì)象上搜索相應(yīng)的屬性值:調(diào)用2級(jí)函數(shù)所使用的函數(shù)調(diào)用對(duì)象、調(diào)用1級(jí)函數(shù)所使用的函數(shù)調(diào)用對(duì)象、全局對(duì)象 — 根據(jù)函數(shù)定義的嵌套關(guān)系,JavaScript將生成一個(gè)由全局對(duì)象和函數(shù)調(diào)用對(duì)象所組成的對(duì)象鏈。訪問(wèn)變量時(shí),程序?qū)碾x訪問(wèn)語(yǔ)句最近的那個(gè)對(duì)象開(kāi)始搜索,如果沒(méi)有搜索到,則在對(duì)象鏈中上一級(jí)的對(duì)象中繼續(xù)進(jìn)行搜索,直至全局對(duì)象。
由于這個(gè)對(duì)象鏈與變量的作用域有關(guān),因此也叫做“作用域鏈”。
如果需要臨時(shí)改變作用域鏈,將某個(gè)對(duì)象插入到作用域鏈的最前端(作為最先訪問(wèn)到的那個(gè)函數(shù)對(duì)象),可以使用with語(yǔ)句:
with(o){
//code use properties of object o.
}
不過(guò),在JavaScript嚴(yán)格模式下,with語(yǔ)句是被禁用的;即使在非嚴(yán)格模式下,也不推薦使用with語(yǔ)句。
- JavaScript高級(jí)程序設(shè)計(jì)之變量與作用域
- JS中作用域以及變量范圍分析
- JavaScript變量作用域及內(nèi)存問(wèn)題實(shí)例分析
- JS塊級(jí)作用域和私有變量實(shí)例分析
- JavaScript變量類型以及變量作用域詳解
- javascript 的變量、作用域和內(nèi)存問(wèn)題
- JS變量及其作用域
- js 作用域和變量詳解
- 關(guān)于JS變量和作用域詳解
- JavaScript變量的作用域全解析
- JavaScript 變量、作用域及內(nèi)存
- js變量、作用域及內(nèi)存詳解
- 深入解析JavaScript中的變量作用域
- Javascript變量作用域詳解
- JavaScript中變量的作用域詳解
相關(guān)文章
對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解
今天小編就為大家分享一篇對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript從數(shù)組中刪除特定數(shù)據(jù)的方法總結(jié)
js數(shù)組是js部分非常重要的知識(shí),有時(shí)我們有這么個(gè)需求js數(shù)組刪除指定元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript從數(shù)組中刪除特定數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08
Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式
這篇文章主要介紹了Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
不錯(cuò)的用外部Javascript修正特定網(wǎng)頁(yè)內(nèi)容
不錯(cuò)的用外部Javascript修正特定網(wǎng)頁(yè)內(nèi)容...2007-08-08
JS刪除數(shù)組中某個(gè)元素的四種方式總結(jié)
js刪除指定元素方法有很多,下面這篇文章主要給大家介紹了關(guān)于JS刪除數(shù)組中某個(gè)元素的四種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
微信小程序?qū)崿F(xiàn)拍照畫(huà)布指定區(qū)域生成圖片
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拍照畫(huà)布指定區(qū)域生成圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
js通過(guò)iframe加載外部網(wǎng)頁(yè)的實(shí)現(xiàn)代碼
這篇文章主要介紹了js通過(guò)iframe加載外部網(wǎng)頁(yè)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04
Javascript中構(gòu)造函數(shù)要注意的一些坑
JavaScript語(yǔ)言是一門(mén)面向?qū)ο蟮恼Z(yǔ)言,但JS中并沒(méi)有類的概念的。于是JavaScript采用構(gòu)造函數(shù)的方式來(lái)模擬類的效果,即我們通過(guò)函數(shù)來(lái)創(chuàng)建對(duì)象。這也證明了函數(shù)在JavaScript中具有非常重要的地位。本文主要介紹了Javascript中構(gòu)造函數(shù)的一些坑,需要的朋友可以參考。2017-01-01

