一文掌握JavaScript的作用域、作用域链及闭包

最新推荐文章于 2025-02-27 20:04:49 发布

原创最新推荐文章于 2025-02-27 20:04:49 发布 · 622 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

1. 变量的作用域

作用域就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期。在 Javascript 中，作用域分为全局作用域和函数作用域（ES6新增块级作用域）。

全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。

函数作用域：在函数内部才可以访问

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

var n=999;

function f1(){
    alert(n);
}

f1(); // 999

上面代码中，函数f1可以读取全局变量n。

但是，正常情况下，函数外部无法读取函数内部声明的变量。

function f1(){
    var n=999;
}

alert(n); 
// Uncaught ReferenceError: n is not defined(

上面代码中，函数f1内部声明的变量n，函数外是无法读取的。

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

function f1(){
    n=999;
}

f1();

alert(n); // 999

作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。作用域是分层的，内层作用域可以访问外层作用域的变量，反之则不行。

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

1）泡泡1是全局作用域，有标识符foo；

2）泡泡2是作用域foo，有标识符a,bar,b；

3）泡泡3是作用域bar，仅有标识符c。

2. 作用域链

一般情况下，变量取值到创建这个变量的函数的作用域中取值。

但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链（scope chain）。

作用域链来保证对执行环境有权访问的变量和函数的有序访问。隔离变量

var a = 10,b = 20;
function fn() { //这里可以访问a、b、c
    var a = 100,c = 30;
    function bar() { //这里可以访问a、b、c、d
        var a = 100, d = 40;
        console.log(a); //100--先访问自己作用域中的变量
        console.log(b); //20--当前作用域中没有逐级向上查找
        console.log(c); //30--当前作用域中没有往上级作用域中查找
    }
    bar();
}
fn();
//上级作用域不可以访问下级作用域中的变量
//这里只可以访问a、b
console.log(c); //ReferenceError: c is not defined

以上代码涉及了3个执行环境：全局环境、fn()局部环境和bar()局部环境。在一个变量环境中只能访问他自己的环境和父执行环境。bar(）的父执行环境就是fn()，而fn()的父执行环境就是全局环境。如果还不清楚可以参考下图：

我们这时候会发现函数外部是无法访问内部的局部环境的，但是我们想突破作用域链怎么办呢？这时候就有了闭包共享作用域。闭包这个名词就出现了。

3. 闭包

3.1 闭包介绍

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

function f1(){

    var n=999;

    function f2(){
        alert(n); // 999
    }

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

function f1(){

    var n=999;

    function f2(){
        alert(n);
    }

    return f2;

}

var result=f1();//var result = function f2(){ alert(n);}

result(); // 999

上面代码中的f2函数，就是闭包。闭包就是有权访问另一个函数作用域中的变量的函数。

function f1() {
    var a = 100;
    return function () {//闭包
        console.log(a);
    }
}
console.log(a);//ReferenceError: a is not defined
var result = f1(); //相当于 var result = function(){console.log(a);}
result(); //100

闭包就是return后面的匿名函数，即能够读取其他函数内部变量的函数。由于在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

3.2 闭包作用

闭包的最大用处有两个，一个是可以读取其他函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。请看下面的例子，闭包使得内部变量记住上一次调用时的运算结果。避免全局变量污染

function foo(num) {
    return function () {//闭包
        console.log(++num);
    }
}
var result = foo(5); //var result=function () {console.log(++5);}
result(); //6
result(); //7
result(); //8
var result = foo(5); //var result=function () {console.log(++5);}
result(); //6
result(); //7
result(); //8

在这段代码中，result实际上就是闭包。前三次调用的值分别是6,7,8这证明了，函数foo中的局部变量num一直保存在内存中，并没有在foo调用后被自动清除。

为什么会这样呢？原因就在于foo是匿名函数的父函数，而匿名函数被赋给了一个全局变量，这导致匿名函数始终在内存中，而匿名函数的存在依赖于foo，因此foo也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

上面代码中，num是函数foo的内部变量。通过闭包，num的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包result使得函数foo的内部环境，一直存在。所以，闭包可以看作是函数内部作用域的一个接口。