作用域

什么是作用域?


在编程领域内,作用域是用来控制变量与参数的可见性及生命周期。对编程人员来说这是一项非常重要的服务,因为它减少了命名冲突以及提供了自动内存的管理。

类型


根据访问的范围不同,可以将作用域分为三种类型:全局作用域、局部作用域、块级作用域。

全局作用域

var a = 12; //全局变量
if (true) {
    console.log(a); //块级作用域范围内进行访问a
}
console.log(a); 
function f () {
    console.log(a); //局部作用域范围内进行访问a
}
f(); //执行f方法

如上所示的这样的,变量a就是全局变量,它被定义在了全局作用域里了。作为全局变量a,它可以在任意地方被访问到。

局部作用域(函数作用域)

所谓的局部作用域,指的是在函数范围内的作用域,故也可以称之为函数作用域

function f () {
    var a = 12; //局部作用域进行定义变量a
    console.log(a); //访问局部变量a
}
f(); //执行f方法
console.log(a); //全局范围内进行访问a,会是undefined
if (true) {
    console.log(a); //块级作用域访问a,依然是访问不到的
}

如上所示,变量a在函数方法里进行了定义,所以变量a作用范围只能是该函数内的局部作用域。跳出该作用域外部,无论是全局还是其他地方都访问不到该变量a

块级作用域(ES5不支持,ES6支持)

在大多数的类C的语言中都会拥有块级作用域的。所谓的块级作用域指的是在一个代码块中(括在一对花括号中的一组语句)定义的所有变量对外是不可见的。定义在代码块中的变量在代码块执行结束以后会被释放掉。这是一件好事,但是不幸的是在JS中,貌似语法上是支持块级作用域的,但实质是只支持全局作用域局部作用域不支持块级作用域,这会导致在块级作用域内定义的变量对外是可见的,会引发变量的外部泄露。这可能会成为一个错误之源。

if (true) {
    var a = 12;
} 
function f () {
    console.log(a);//可以访问到变量a
    for(var i = 0; i < 5; i++) {
          
    }
    console.log(i);//可以访问到变量i
}
f();//执行f方法

通过上面的示例可以看到这个问题是有多严重了,这会导致很多莫名其妙的问题出现。

注意事项

由于缺少块级作用域的支持,所以对于延迟变量的声明在JS中是不建议的,最好的做法是在函数体的顶部声明可能用到的所有变量。

词法作用域与动态作用域

词法作用域,也可以叫做静态作用域。意思是无论函数在哪里调用,词法作用域都只在由函数被声明时所处的位置决定。既然有静态作用域,那么也有动态作用域。而动态作用域的作用域则是由函数被调用时执行的位置所决定

var value = 1;
 
function foo() {
    console.log(value);
} 
function bar() {
    var value = 2;
    foo();
}
bar(); //1

如上所看到的,因为js采用的是词法作用域(静态作用域),所以在调用foo函数的时候,变量value首先在函数内部作用域找对应的变量,如果没有找到,则去foo函数定义的时候的外层的作用域找寻变量也就是全局变量value。所以最终输出的是全局变量1。
这就是词法作用域,如果说是动态作用域的话,则它会根据被调用的时候所处的作用域进行查找变量,也就是会输出2。

ES5与ES6的区别


变量声明

在ES6中对于不支持块级作用域的问题得到了有效缓解。我们可以在块级作用域内用let进行变量的声明。被声明的变量只在该作用域内可见,外部是访问不到该内部的变量。

// 1.外层作用域无法获取到内层作用域
function fn1() {
    let a = 41;
    if(1 == 1) {
        let a = 3;
        console.log(2,a); // 2 3
    }
    console.log(1,a); // 1 41
}
fn1();

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名,也都互不干扰
{  
    {
        let food = 'apple';
        console.log(food); // apple
    }
    let food = 'orange';
    console.log(food); // orange
}

函数声明

ES5中,函数只能在全局作用域函数作用域中声明,不能在块级作用域中声明。但是在ES6中,函数可以在块级作用域中声明。

但是会有一定的问题,因为函数声明会被提到代码的最前面。所以会报错,最好在ES6中用函数表达式来表示一个函数。

//1.函数声明报错
{
    if (4 < 2) {
        function fn() {
            console.log('我在函数里面!');
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
    let fa = '111';
    let fn = function () {
        console.log('我在函数里面!');
    }
    console.log(fa,fn); // 111 ƒ () { console.log('我在函数里面!');}
}

作用域链

Function对象有一个仅供 JavaScript 引擎存取的内部属性。
这个属性就是[[Scope]][[Scope]]包含了一个函数被创建的作用域中对象的集合。这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

关于作用域链,局部作用域可以访问到全局作用域中的变量和方法,而全局作用域不能访问局部作用域的变量和方法

var a = 0;

function fn () {
  var b = 1;
  console.log(a); // 输出 0
}

// 全局作用域并不能访问 fn 函数中定义的 b 变量
console.log(b); // 报错

fn();

当函数fn()创建时,它的作用域中插入了一个对象变量,这个全局对象代表所有在全局范围内定义的变量。

创建时作用域链.png

当函数fn()执行时,会创建一个名为执行环境的独一无二的内部对象。函数每执行一次,都会创建一个执行环境。当函数执行完毕,执行环境就会被销毁。

每个执行环境都有自己的作用域链,用来解析标识符。当执行环境被创建时,它的作用域就会初始化为当前运行函数的[[Scope]]属性中的对象。

执行环境创建完成之后,就会生成一个"活动对象",这个对象包含了当前函数的所有局部变量命名参数参数集合this。此对象会被推入作用域链的最前端。

当执行环境被销毁后,"活动对象"也会随之被销毁。

如下图所示:


fn函数执行时作用域链.png

fn()时,会使用到a变量,这时候就会搜索执行环境的作用域链,找到就使用,找不到就会到作用域链的下一个对象找,如果搜寻到最后,还没找到,那就认定这个变量是未定义的。

推荐阅读更多精彩内容