深入理解JavaScript变量作用域、变量提升与作用域链

JavaScript函数作用域机制

在C、Java等编程语言中，变量作用域（scope）通常遵循“代码块作用域”（block scope）规则。然而，JavaScript采用的是“函数作用域”（function scope）机制。这意味着变量的可见范围仅由其所处的函数决定，而与if、for等逻辑代码块无关。以下示例展示了JavaScript与C、Java在变量作用域行为上的显著差异：

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等支持“代码块作用域”的语言中，当if或for等逻辑块执行结束时，在这些块内部定义的变量会被销毁。JavaScript的行为则不同：只要变量在某个函数内使用var定义，该变量在整个函数范围内均可访问，即使访问代码位于变量定义语句之前。

function(){
console.log(a);//undefined
var a = "test";
console.log(a);//test
}

变量提升（Hoisting）原理

在上述示例中，如果变量a在函数中从未被定义，直接调用console.log(a)会抛出ReferenceError。然而，一旦在函数中声明了a，即使声明语句位于调用语句之后，调用也是合法的（此时a的值为undefined）。这种现象在JavaScript中被称为变量提升（hoisting）：使用var关键字声明的所有变量，其声明操作会被自动提升至函数体的最开头，而赋值操作仍保留在原位。因此，上述代码等价于：

function(){
var a;
console.log(a);//undefined
a = "test";
console.log(a);//test
}

作用域链与变量查找

变量的作用域链

结合JavaScript的变量存储机制，可以很好地理解“函数作用域”与变量提升。由于变量存储在全局对象或函数调用对象上，当在函数中定义变量时，无论定义位置如何，该函数调用对象中必然会出现一个与变量同名的属性。因此，函数内的任何代码都能访问到该变量。

涉及函数调用时，JavaScript还有一个重要概念：作用域链。由于变量存储在全局对象或函数调用对象上，访问变量时可能从多个对象中获取值。以下代码为例：

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级函数（level-2 function）内部访问变量x时，程序会从三个对象中搜索属性值：当前函数（第2级）的调用对象、外层函数（第1级）的调用对象以及全局对象。根据函数的嵌套关系，JavaScript会构建一条由全局对象和函数调用对象组成的对象链。访问变量时，程序从离当前语句最近的对象开始搜索，若未找到，则沿对象链向上层对象继续搜索，直至全局对象。

由于这条对象链与变量的作用域紧密相关，因此被称为“作用域链”。

with语句对作用域链的影响

若需临时修改作用域链，将某个对象插入到链的最前端（作为最先访问的对象），可以使用with语句：

with(o){
//code use properties of object o.
}

需要注意的是，在JavaScript严格模式下，with语句是被禁止的；即使在非严格模式下，也不推荐使用with语句。