Javascript 基础之作用域

1 函数作用域

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()

仔细观擦demo1 与 demo2 仅仅一点区别，然而执行后的结果却是截然不同, 究其原因主要是因为Javascript 是函数作用域而不是块级作用域，函数作用域内命名的变量在函数内部起作用。

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 ()

在执行scopeTest1 时作用域链是 scopeTest1 -> scopeDemo() -> window
在执行scopeTest2 时作用域链是 scopeTest2 -> scopeDemo() -> window

3 作用域链与代码优化

从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

优化后:

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

4 如何在Javascript 函数中实现块级作用域

在一个函数中定义的变量，当这个函数调用完后，变量会被销毁，我们可以用这个特性来模拟出JS的块级作用域。Javascript的闭包特性可以实现防止命名冲突。

function test(){ 
  (function (){ 
    for(var i=0;i<4;i++){ 
    } 
  })(); 
  alert(i); 
} 
test();