JavaScript基礎(chǔ)之作用域
再聊AO和BO之前還需要了解作用域的概念,這樣方便后面了解很多東西,比如this指向等。
作用域
作用域(Scope)簡(jiǎn)單的說就是變量,函數(shù)和對(duì)象定義后其可用的范圍。
console.log(a)
{
var a=1;
}
function test(){
var b=2;
}

可以看出在外面無(wú)法使用變量b??梢钥闯鲎饔糜蚩梢员Wo(hù)數(shù)據(jù)不會(huì)被外部隨意訪問,以及修改。簡(jiǎn)單可以看出作用域可以相互隔離彼此的變量,也就是說在不同的作用域下的同名變量不會(huì)沖突。
而作用域最重要常用的是全局作用域和函數(shù)作用域。不過ES6之后因?yàn)閘et 和const關(guān)鍵字的出現(xiàn)又引如了一個(gè)塊級(jí)作用域。
全局作用域
全局作用域簡(jiǎn)單說就是所有域都可以訪問器域下變量以及方法對(duì)象。
var a="全局1";
function test(){
b="沒有帶var,隱式轉(zhuǎn)變?yōu)槿肿兞?;
window.c="直接將變量c作為window下也會(huì)變?nèi)?;
var d="非全局作用域";
}
#第一步 執(zhí)行test()
test() #這樣才會(huì)將方法內(nèi)的變量進(jìn)行定義以及賦值
#第二步
console.log(a)
console.log(b)
console.log(c)
console.log(d)

一般來(lái)說window的屬性都是全局變量,而window.c 其實(shí)式將c作為一個(gè)window的屬性來(lái)對(duì)待。注意一點(diǎn)在聲明變量的時(shí)候不要帶var ,最好是帶著var,這樣不會(huì)將其提升成全局變量,導(dǎo)致數(shù)據(jù)會(huì)被相互污染。
補(bǔ)充說一句,test這個(gè)方法也是全局域下的方法。
function test(){
var a= function(){
console.log("字面量的方法")
}
b=function(){
console.log("不帶var字面量的方法")
}
function test1(){
console.log("普通聲明方法")
}
}

這個(gè)可以看出字面量聲明的方法,類似一個(gè)可以看成一個(gè)將函數(shù)賦值給一個(gè)變量,將其作為一個(gè)變量來(lái)對(duì)待。前面預(yù)編譯的時(shí)候也演示過了。
函數(shù)作用域
函數(shù)作用域與全局作用域相反,其不是為所有的地方用,而是在一定的范圍用,一般聲明的變量,只在函數(shù)內(nèi)部使用。
function test(){
var a="非全局作用域";
console.log(a)
}
現(xiàn)在又有了一個(gè)問題,全局方法里面可以用函數(shù)作用域內(nèi)部的變量。那么函數(shù)是內(nèi)部是否可以有其下面的函數(shù)生成的函數(shù)作用域呢?以及其變量是否可以相互用?
function test(){
var a="test方法作用域";
function test1(){
var b="test1方法作用域";
console.log("a的值=",a);
}
# 調(diào)用函數(shù)內(nèi)部函數(shù)
test1();
console.log("b的值=",b);
}

這個(gè)地方可以看出作用域是分層的,內(nèi)層作用域可以訪問外層作用域的變量,外部訪問不了內(nèi)部的變量。
if,switch,for ,while
條件語(yǔ)句和邏輯循環(huán),**它們不是函數(shù)同樣也不像函數(shù),也不會(huì)創(chuàng)建一個(gè)新的作用域。**其塊定義的變量將保留在它們存在的作用域中。
function test(a){
if(a>1){
var b=13;
}else{
var b=1;
}
console.log(b);
}

所以在使用條件語(yǔ)句和邏輯循環(huán)的時(shí)候,盡可能不要再全局作用域下使用。因?yàn)槠浞椒w中的變量會(huì)影響其他的數(shù)據(jù)。
塊作用域
塊作用域的出現(xiàn),一般需要依賴兩個(gè)關(guān)鍵字let或const之一,不然就不會(huì)存在這個(gè)塊作用域。

function test(a){
const b="23";
if (a>2){
const c=3
console.log("第一個(gè)人if---c-----",c)
}
if (a>1){
console.log("第二個(gè)人if----b----",b)
console.log("第二個(gè)人if----c----",c)
}
}

可以看出如果有關(guān)鍵字let和const后,其變量的范圍就是在其聲明的那一對(duì)花括號(hào)內(nèi)。所以第一個(gè)if中的c變量再第二個(gè)if的里面無(wú)法取得。當(dāng)然還是遵守:內(nèi)層作用域可以訪問外層作用域的變量。
了解let和const看前一篇:地址
作用域鏈
這個(gè)看似很神奇的概念,簡(jiǎn)單的說就是作用域內(nèi)有就直接用,沒有找上一層,如果都沒有,找到全局就結(jié)束。
var a=1
var b=3
function test(){
var a=2
console.log("a的值",a);
console.log("b的值",b);
}

多嘴說一下,作用域鏈其實(shí)和原型鏈的尋找邏輯一樣,后面繼續(xù)聊。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript中構(gòu)造函數(shù)與原型鏈之間的關(guān)系詳解
在本篇文章里小編給大家分享了關(guān)于JavaScript中構(gòu)造函數(shù)與原型鏈之間的關(guān)系相關(guān)知識(shí)點(diǎn),需要的朋友們學(xué)習(xí)下。2019-02-02
js常用的鍵盤事件有哪些(用法示例)_鍵碼keyCode對(duì)照表
用戶按下鍵盤上的鍵,首先會(huì)觸發(fā)keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框發(fā)生變化之前被觸發(fā);而keyup在文本框發(fā)生變化之后被觸發(fā)。如果用戶按下一個(gè)鍵不放,就會(huì)重復(fù)觸發(fā)keydown和keypress事件。2023-02-02
JavaScript實(shí)現(xiàn)關(guān)鍵字高亮功能
關(guān)鍵詞高亮技術(shù)各大CMS基本上都有,但基本都是后端代碼來(lái)實(shí)現(xiàn)的,今天我們探討下如何使用javascript來(lái)實(shí)現(xiàn)代碼高亮技術(shù)。2014-11-11
javascript學(xué)習(xí)筆記(十九) 節(jié)點(diǎn)的操作實(shí)現(xiàn)代碼
javascript學(xué)習(xí)筆記之節(jié)點(diǎn)的操作實(shí)現(xiàn)代碼,包括節(jié)點(diǎn)的創(chuàng)建、添加、移除、替換、復(fù)制2012-06-06

