1 函數(shù)作用域
demo1,
var scope = "action 1"
function scopeTest() {
console.log(scope) // action 1
scope = "action 2"
console.log(scope) // action 2
}
scopeTest()
demo2,
var scope = "action 1"
function scopeTest() {
console.log(scope) // undefined
var scope = "action 2"
console.log(scope) // action 2
}
scopeTest()
仔細(xì)觀擦demo1 與 demo2 僅僅一點區(qū)別茬射，然而執(zhí)行后的結(jié)果卻是截然不同, 究其原因主要是因為Javascript 是函數(shù)作用域而不是塊級作用域，函數(shù)作用域內(nèi)命名的變量在函數(shù)內(nèi)部起作用漆改。
2 作用域鏈
scope = "action 1"
function scopeDemo (){
var name="action 2"
function scopeTest1 (){
var name="action 3"
console.log(name)
}
function scopeTest2 (){
console.log(name)
}
scopeTest1 () // action 3
scopeTest2 () // action 2
}
scopeDemo ()
在執(zhí)行scopeTest1 時作用域鏈?zhǔn)?scopeTest1 -> scopeDemo() -> window
在執(zhí)行scopeTest2 時作用域鏈?zhǔn)?scopeTest2 -> scopeDemo() -> window
3 作用域鏈與代碼優(yōu)化
從作用域鏈的結(jié)構(gòu)可以看出沾瓦，在運行期上下文的作用域鏈中满着，標(biāo)識符所在的位置越深，讀寫速度就會越慢贯莺。
function changeColor(){
document.getElementById("btnChange").onclick=function(){
document.getElementById("targetCanvas").style.backgroundColor="red";
};
}
優(yōu)化后:
function changeColor(){
var doc=document;
doc.getElementById("btnChange").onclick=function(){
doc.getElementById("targetCanvas").style.backgroundColor="red";
};
}
4 如何在Javascript 函數(shù)中實現(xiàn)塊級作用域
在一個函數(shù)中定義的變量风喇，當(dāng)這個函數(shù)調(diào)用完后，變量會被銷毀缕探，我們可以用這個特性來模擬出JS的塊級作用域魂莫。Javascript的閉包特性可以實現(xiàn)防止命名沖突。
function test(){
(function (){
for(var i=0;i<4;i++){
}
})();
alert(i);
}
test();
