跳至主要內容

【重温基础】19.闭包

梁晨大约 6 分钟javascriptjavascript

【重温基础】19.闭包

本文是 重温基础 系列文章的第十九篇。
今日感受：将混乱的事情找出之间的联系，也是种能力。

系列目录：

本章节复习的是JS中的关于闭包，这个小哥哥呀，看看。

前置知识：
声明函数两种方法：

  • 函数声明，存在 函数声明提升 ，因此可以在函数声明之前调用（不会报错）。

    fun(); // ok function fun(){};

  • 函数表达式，不存在 函数声明提升 ，若定义前调用，会报错（函数还不存在）。

    fun(); // error var fun = function (){};

1.概念

2.1 词法作用域

这里先要了解一个概念， 词法作用域 ：它是静态的作用域，是书写变量和块作用域的作用域**。

function f (){
    var a = "leo";
    function g(){console.log(a)};
    g();
}
f(); // "leo"

由于函数 g 的作用域中没有 a 这个变量，但是它可以访问父作用域，并使用父作用域下的变量 a ，最后输出 "leo" 。

词法作用域中使用的域，是变量在代码中声明的位置所决定的。嵌套的函数可以访问在其外部声明的变量。

2.2 闭包

接下来介绍下 闭包 概念， 闭包 是指 有权访问另一个函数作用域中的变量的函数 。

闭包 是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。

创建闭包的常见方式： 在一个函数内创建另一个函数 。如：

function f (){
    var a = "leo";
    var g = function (){
        console.log(a);
    };
    return g;// 这里g就是一个闭包函数，可以访问到g作用域的变量a
}
var fun = f();
fun(); // "leo"

通过概念可以看出，闭包有以下三个特征：

  • 函数嵌套函数
  • 函数内部可以引用函数外部的参数和变量
  • 参数和变量不会被垃圾回收机制回收

注：关于内存回收机制，可以查看阮一峰老师的 《JavaScript 内存泄漏教程》 。

另外，使用闭包有以下好处：

  • 将一个变量长期保存在内存中

  • 避免全局变量的污染

    function f (){ var a = 1; return function(){ a++; console.log(a); } } var fun = f(); fun(); // 2 fun(); // 3

因为垃圾回收机制没有回收，所以每次调用 fun() 都会返回新的值。

  • 私有化成员，使得外部不能访问

    function f (){ var a = 1; function f1 (){ a++; console.log(a); }; function f2 (){ a++; console.log(a); }; return {g1:f1, g2:f2}; }; var fun = f(); fun.g1(); // 2 fun.g2(); // 3

2.易错点

2.1 引用的变量发生变化

function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(){
            console.log(i);
        }
    }
    return a;
}
var fun = f();
fun[0]();  // 10
fun[1]();  // 10
// ...
fun[10]();  // 10

原本照我们的想法， fun 方法中每个元素上的方法执行的结果应该是 1,2,3,...,10 ，而实际上，每个返回都是 10 ，因为每个闭包函数引用的变量 i 是 f 执行环境下的变量 i ，循环结束后， i 已经变成 10 ，所以都会返回 10 。
解决办法可以这样：

function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(index){
            return function(){
                console.log(index);
                // 此时的index，是父函数作用域的index，
                // 数组的10个函数对象，每个对象的执行环境下的index都不同
            }
        }(i);
    };
    return a;
};
var fun = f();
fun[0]();  // 0
fun[1]();  // 1
// ...
fun[10]();  // 10

2.2 this指向问题

var obj = {
    name : "leo", 
    f : function(){
        return function(){
            console.log(this.name);
        }
    }
}
obj.f()();  // undefined

由于里面的闭包函数是在 window 作用域下执行，因此 this 指向 window 。

2.3 内存泄漏

当我们在闭包内引用父作用域的变量，会使得变量无法被回收。

function f (){
    var a = document.getElementById("leo");
    a.onclick = function(){console.log(a.id)};
}

这样做的话，变量 a 会一直存在无法释放，类似的变量越来越多的话，很容易引起内存泄漏。我们可以这么解决：

function f (){
    var a = document.getElementById("leo");
    var id = a.id;
    a.onclick = function(){};
    a = null;  //主动释放变量a
}

通过把变量赋值成 null 来主动释放掉。

3.案例

3.1 经典案例——定时器和闭包

代码如下：

for(var i = 0 ; i<10; i++){
    setTimeout(function(){
        console.log(i);
    },100);
}

不出所料，返回的不是我们想要的 0,1,2,3,...,9 ，而是10个 10 。
这是因为js是单进程，所以在执行 for循环 的时候定时器 setTimeout 被安排到任务队列中排队等候执行，而在等待过程中， for循环 已经在执行，等到 setTimeout 要执行的时候， for循环 已经执行完成， i 的值就是 10 ，所以就打印了10个 10 。
解决方法 ：

  • 1.使用ES6新增的 let 。

把 for循环 中的 var 替换成 let 。

  • 2.使用闭包

    for(var i = 0; i<10 ; i++){ (function(i){ setTimeout(function(){ console.log(i); }, i*100); })(i); }

3.2 使用闭包解决递归调用问题

function f(num){
    return num >1 ? num*f(num-1) : 1;
}

var fun = f;
f = null;
fun(4)   // 报错 ，因为最好是return num* arguments.callee（num-1），arguments.callee指向当前执行函数，但是在严格模式下不能使用该属性也会报错，所以借助闭包来实现

这里可以使用 return num >1 ? num* arguments.callee(num-1) : 1; ，因为 arguments.callee 指向 当前执行函数 ，但是在严格模式下不能使用，也会报错，所以这里需要使用闭包来实现。

function fun = (function f(num){
    return num >1 ? num*f(num-1) : 1;
})

这样做，实际上起作用的是闭包函数 f ，而不是外面的 fun 。

3.3 使用闭包模仿块级作用域

ES6之前，使用 var 声明变量会有变量提升问题：

for(var i = 0 ; i<10; i++){console.log(i)};
console.log(i);  // 变量提升 返回10

为了避免这个问题，我们这样使用闭包（匿名自执行函数）：

(function(){
    for(var i = 0 ; i<10; i++){console.log(i)};
})()
console.log(i);  // undefined

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。这里 i 随着闭包函数的结束，执行环境销毁，变量回收。
但是现在，我们用的更多的是ES6规范的 let 和 const 来声明。

参考文章

  1. MDN 闭包
  2. 《JavaScript高级程序设计》

本部分内容到这结束

Author王平安
E-mailpingan8787@qq.com
博 客www.pingan8787.com
微 信pingan8787
每日文章推荐 https://github.com/pingan8787...
JS小册js.pingan8787.com

欢迎关注微信公众号【前端自习课】每天早晨，与您一起学习一篇优秀的前端技术博文 .

技术才是力量
Copyright © 2024 梁晨