原生JS | 作用域

作用域的基础知识

在JavaScript中，每个变量会有一个有效区域（范围），这个就是作用域。一个变量在其作用域内是可以被访问的，在作用域外不能被访问。

全局作用域与局部作用域

变量的执行环境有两种：一种是全局，另一种是局部（如：放在函数里面）。

全局变量

在window环境下声明的变量，或者可以理解为非函数内声明的变量，称为全局变量。全局变量存在于整个JavaScript当中，在任何地方都能被访问和修改。

局部变量

常见的局部变量有以下两种：

● 在函数内声明的变量（使用var）；

● 函数参数（形参）。

局部变量存在于函数体内，它们的值只能在函数体内访问和修改。

不同作用域的访问关系

在函数内部声明的变量（局部变量），在函数外部并不能访问。在函数外部声明的变量，在函数内部可以访问。

一句话概括：“局部可以访问全局，但全局不能访问局部”。

变量的查找方式 & 作用域链

变量的查找方式

当局部作用域当中出现属性的时候，首先查找当前的作用域当中是否具有存储空间，如果有，直接采用；如果没有，向其父级查找，如果父级没有，继续向上，直到查找到window为止。如果window下也不存在该空间，会在全局作用域之下进行空间的创建。

作用域链

由于在全局作用域当中会包含局部作用域，局部作用域当中还可以再包含局部作用域。当有多层作用域时，深层的作用域中查找变量时，会按照“当前作用域”到“上层作用域”再到“全局作用域”的顺序进行查找，这个查找的顺序就可以理解为作用域链。

欢迎沟通交流~~~HTML5学堂（码匠）

实例解析

作用域案例1 - 全局变量

var user = 'HTML5学堂';
console.log(user);
console.log(window.user);

运行结果：

'HTML5学堂'

'HTML5学堂'

在全局作用域下创建的变量，其实就是window对象的属性/方法。也就是“案例1”的代码中 user与window.user是等价的。

作用域案例2 - 局部变量

(function(){
    var user = '码匠';
}());
console.log(user);

运行结果：

报错（user is not defined）

user是创建在function中的变量，为局部变量。在全局中打印user的时候，由于在全局中没有这个变量，所以报错。

作用域案例3 - 不声明局部变量的状态

(function(){
    user = '码匠';
}());
console.log(user);

运行结果：

'码匠'

user = ’码匠‘; 并没有采用var进行变量的声明，此时在函数这个局部的作用域当中，并没有user这个存储空间，之后按照“作用域链”向上翻找，也就是在全局（window）作用域当中进行查找。

在全局作用域中也没有user这个存储空间，此时在全局作用域当中创建user这个存储空间，并将'码匠'赋值给这个存储空间。

作用域案例4 - 形参

var user = 'HTML5学堂';
function changeName(user){
    user = '码匠';
}
changeName(user);
console.log(user);

运行结果：

'HTML5学堂'

在changeName函数当中，形参名为user，由于形参名，也会创建存储空间，因此，在changName当中就出现了一个存储空间。空间状态如下图：

查看如下与案例等价的代码，更有利于理解案例~

var user = 'HTML5学堂';
function changeName(user){
    var user = user;
    user = '码匠';
}
changeName(user);
console.log(user);

如果觉得如上的代码还不容易理解，我们可以尝试更换形参名字，会更容易理解一些~如下代码与案例4的代码也是等价的。

var user = 'HTML5学堂';
function changeName(oldName){
    var newName = oldName;
    newName = '码匠';
}
changeName(user);
console.log(user);

从如上的等价案例当中，不难看出，全局的user变量和函数内部的变量，并不是同一个变量。

更多的案例练习

在我们（HTML5学堂-码匠）开发的微信小程序“决胜前端”当中，我们最新更新了关于作用域的一些练习题，感兴趣的可以进入微信小程序。