JavaScript 作用域

前言

作用域用来规定变量、对象生效的范围。

局部作用域

一个函数就是一个独立的局部作用域。函数一旦定义出来，就诞生了一个新的局部作用域。局部作用域中的变量就称为 局部变量

局部变量只在当前函数内生效，所以不同的函数可以使用相同名称的变量，相互之间不受影响（它们处在不同的作用域中）。

实例代码：

// 此处不能使用 carName 变量

function myFunction() {

    var carName = "Volvo";
    // 函数内可随意使用 carName 变量

}

// 此处不能使用 carName 变量

需要说明一下，函数参数部分的变量也是局部变量（作用域仅限于当前函数）。

全局作用域

定义在函数外的变量，即为全局变量。全局变量处于全局作用域，网页中所有脚本和函数均可直接使用。

var carName = " Volvo";
 
// 此处可使用 carName 变量

function myFunction() {
    // 函数内可使用 carName 变量
}

// 此处可使用 carName 变量

没有使用 var 关键字声明的变量：

给没有用 var 关键字声明的变量赋值，该变量会被 js 隐式声明为全局变量。

function myFunction() {
    carName = "Volvo";  // 变量 carName 会被js隐式声明为全局变量
}

没有使用 var 关键字声明的变量如果出现在函数里，只有该函数调用之后，变量才会被 js 隐式声明为全局变量，否则该变量相当于没定义。

局部变量&全局变量同名

当局部变量和全局变量同名，虽然全局变量作用域更大，甚至覆盖局部变量作用域，但局部变量优先级更高，会屏蔽全局变量。

var a = 100;         
                     
function myFunction()
{                    
    var a = 1000;    
    console.log(a);  //输出 1000
}

变量生命周期

JavaScript 局部变量生命周期：声明时初始化，函数执行完毕后销毁。

JavaScript 局部变量生命周期：声明时初始化，页面关闭后销毁。

变量提升

变量提升，就是把函数内局部变量提升到函数的顶部。需要说明的是，变量提升只是提升变量的声明，并不会把赋值也提升上来（这是 js 函数的一个隐含机制）。

我们定义一个变量：

function myFunction()
{                    
    var a = 100;     
}

实际上它是这样子的：

function myFunction()
{                    
    var a;           
    a = 100;         
}

我们在写 js 代码的时候，我们应该把当前函数需要使用的变量全部放在函数级作用域的顶端（这也是个良好的编程习惯），以防止出现意外。

函数提升

函数提升，就是把函数内部的函数提升到当前函数的顶部。需要说明的是，只有函数声明形式才能被提升（这也是 js 函数的一个隐含机制）。

//函数声明方式提升【成功】

function myTest(){
    foo();
    function foo(){
        alert("我来自 foo");
    }
}

//函数表达式方式提升【失败】

function myTest(){
    foo(); //此处的函数调用报错。
    var foo =function foo(){
        alert("我来自 foo");
    }
}