【重温基础】19.闭包

时间 2019-11-08

标签重温基础闭包繁體版

原文原文链接

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

系列目录：前端

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

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

函数声明，存在函数声明提高，所以能够在函数声明以前调用（不会报错）。

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 闭包

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

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

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

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来声明。

参考文章

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

本部份内容到这结束

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

欢迎关注个人微信公众号【前端自习课】