JavaScript中的匿名函数与闭包

雪夜里的枫叶

于 2021-05-24 21:06:18 发布

阅读量232

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_47675736/article/details/117232427

版权

Javascript中，闭包无疑是重要的一个环节，入门时多半会被弄晕。

下面先从一个例子入手：

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}
 
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
alert(f1 === f2); // false

本以为，f1和f2完全是两个完全一样的函数，但是实际上lazy_sum返回给f1和f2的两个匿名函数（参考本文第三部分）并不一样，即使看到“字面的表达式”是一样的，其实这涉及到更关键的一点是对于Javascript的“对象”的理解，这一点或许将来值得单独拿出来写篇文章。

一、闭包的定义
以上的lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种程序结构就被称为“闭包（Closure）”。（廖雪峰的定义）

在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。（阮一峰的的定义）

二、变量的作用域
要理解闭包，首先必须要明确的是Javascript特殊的变量作用域，也即全局变量和局部变量，这一点不难，可以简单地按照是否使用var声明变量来加以区分。

与变量的作用域相关的还有一个this方法，以及that指向。下面两段代码，在看完本文后不妨回来思考下如何解释两段代码的结果。

第一段代码：

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
alert(object.getNameFunc()());

第二段代码:

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name;
        };
    }
};
alert(object.getNameFunc()());

三、匿名函数
另一个需要明确的，就是匿名函数，举几个栗子：

//普通函数 
function box() {               //函数名是 box 
       return'Lee'; 
}
 
 
//匿名函数
 function(){               //简单的匿名函数，单独使用会报错
     return'Lee'; 
}
 
 
//通过表达式自我执行
 (functionbox() {            //封装成表达式，单独使用会报错
        alert('Lee'); 
})();                  //()表示执行函数，并且传参
 
 
//把匿名函数赋值给变量 
var box=function(){            //将匿名函数赋给变量 
       return'Lee'; 
};
 alert(box());            //调用方式和函数调用相似
 
 
//函数里的匿名函数
 function box() { 
       return function(){                  //函数里的匿名函数，产生闭包 
            return'Lee';
    } 
   } 
alert(box()());               //调用匿名函数

四、闭包与内存

接下来就是闭包最让人疑惑的地方。

闭包最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

如何理解呢？从一个简单计数器入手：

function getCounter(){
    var counter = 1;
 
    var add = function() {
        counter++;
    }
 
    var desc = function() {
        counter--;
    }
 
    var get = function() {
        return counter;
    }
 
    return {
        add: add,
        desc: desc,
        get: get
    }
};
 
var counter1 = getCounter();
var counter2 = getCounter();
 
console.log(counter1 === counter2)    //false
 
console.log(counter1.get())    //1
console.log(counter2.get())    //1
 
counter1.add()
counter1.add()
counter1.add()
 
counter2.desc()
counter2.desc()
 
console.log(counter1.get())    //4
console.log(counter2.get())    //-1

counter1 = null;
counter2 = null;

以上的例子可以看到，闭包内的函数add、desc可以反复调用，而父函数getCounter里的变量值则是在不断累加的。也就是说函数counter1及counter2中定义的父函数getCounter中的，由变量及子函数等一系要素构成该父函数的“运行环境”，一直停留在内存中，因而出现了累加的效果。

在JS的垃圾回收机制（garbage collection）中，如果一个变量发生过一次及以上的引用，那么这个变量就将停留在内存中，如以上代码，console.log(counter1.get())即是一次对counter1引用，所以这个getCounter()将会作为counter1的值一直停留在内存中，直到重新给counter1赋值，例如counter1 = null;就是一次清理内存的操作。在目前的小型脚本中，是不太会显示出内存占用问题的，而且现在新型的浏览器都有一定的内存控制机制，但是在古董级的IE浏览器中，可能就会面对严重的内存泄漏问题。所以及时清理无用内存是一个很好的习惯。

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}
 
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
 
console.log(f1()); // 16
console.log(f2()); // 16
console.log(f3()); // 16

五、正确地使用闭包

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}
 
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
 
console.log(f1()); // 16
console.log(f2()); // 16
console.log(f3()); // 16