JavaScript | 闭包

2018-09-04  本文已影响0人  shawn233

Reference : JavaScript教程 - 廖雪峰的官方网站

闭包(Closure)是JavaScript中相当有趣的一个特性,学起来稍有一些难度。这篇文章讲解JavaScript中的闭包,遵循先知道是什么,再知道为什么的顺序。

什么是闭包

(本节基础:函数、高阶函数;本节参考:闭包 - 廖雪峰的官方网站

我们通常定义的函数,比如说sum,调用sum([1, 2, 3, 4, 5])即得到结果。

function sum (arr) {
    return arr.reduce(function (x, y) {
        return x + y;
    });
}

sum ([1, 2, 3, 4, 5]);

JavaScript的语法提供了一种特性:我们可以返回函数内定义的函数。这个特性看起来有点晕,我们接着上面的例子来理解。

现在我定义另一个函数lazy_sum,并利用上述特性,返回一个函数内定义的函数。

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce (function (x, y) {
            return x + y;
        });
    };
    return sum;
}

现在我们调用lazy_sum,返回的结果是一个新的函数。

var f = lazy_sum([1, 2, 3, 4, 5]);

但毕竟函数f还没有被执行,现在我们并没有任何一个变量实际保存了对数组求和的结果。想要得到结果,需要调用函数f

f(); // 15

函数f没有参数的原因是在lazy_sum中定义sum时,指定sum没有参数。

现在我们对闭包有了一个初步的印象,你可能会觉得奇怪,这个特性看上去怎么这样鸡肋?其实我刚开始对闭包也是同样的评价,但接下来,我将试图从闭包的实现方式上深入地讲解闭包,并在本文最后给出闭包地几个相当重要地用法。

闭包

(本节基础:闭包的概念、变量作用域、编译原理;本节参考:1. 深入理解javascript原型和闭包, 2. 闭包 - JavaScript | MDN)

我们再看一下之前定义的lazy_sum

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce (function (x, y) {
            return x + y;
        });
    };
    return sum;
}

学过编译原理的朋友应该明白,函数中的变量作用域限于整个函数,在编译时,其符号表(symbol table)会在进入函数时创建,离开函数时删除。那么我们仔细分析,闭包是否与编译函数时符号表有冲突。

var f = lazy_sum([1, 2, 3, 4, 5])

当我们调用lazy_sum,传入参数时,lazy_sum的符号表被创建,局部变量arr记录在其中,在这个例子里,arr的值是[1, 2, 3, 4, 5]。函数执行结束后,sum作为结果返回,且lazy_sum的符号表被删除,此时关于arr的信息也被删除。

但奇怪的是,我们此时调用f,相当于调用sum时,却能得到求和的正确结果。按理来说,此时arr的值在符号表中已经找不到了。

看似闭包不符合编译原理,实际上,开发者为了实现闭包,特意修改了JavaScript的符号表规则。一般的语言,如C,Java等,符号表遵循在本节开头所述规则:符号表会在进入函数时创建,离开函数时删除。然而为了实现闭包,JavaScript的符号表规则如下:

当闭包出现时,该函数执行后,其符号表不删除。

用在上面的例子里就是说:由于lazy_sum是闭包,所以调用后其符号表不删除。这样,我们就不难理解为什么在之后调用f,我们还能得到sum的值。

如果到这里还能看懂,那么恭喜你已经理解了闭包的绝大部分奥秘;如果看的一头雾水,那说明笔者功力尚浅,没能把闭包的原理讲清楚,推荐不太明白的读者转到本节的参考文章,应该能有所收获。

我们来看下面一个例子:

function fn() {
    var max = 10;

    return function bar (x) {
        if (x > max) {
            console.log(x);
        }
    };
}

var f1 = fn(),
     max = 100;

f1(15);

运用闭包的符号表规则,调用fn()后,其符号表保留,调用f1(15)时,相当于调用bar(15),这时在bar的符号表中寻找变量max,没有找到,按照规则,到定义它的域中寻找(注意不是父域,本例中定义bar的域时fn函数体,f1的父域时全局域),找到保留下来的fn符号表中,max的值为10,所以在控制台显示15。

这个例子里存疑的地方在于,通常,当函数中出现一个变量名时,我们先在函数体中寻找,若没有,则逐层在父域的符号表中查找。然而,我们发现,f1调用时,max变量的值首先在bar函数体内没有找到,接着却没有向父域(全局域)中查找,而是向定义bar函数的域,即fn的函数体查找。

可见,闭包在形式上将函数fn内定义的bar函数返回了出来,而实际上bar函数始终没能离开fn的函数体,bar的函数体中引用的变量max始终与fn的函数体中定义的变量max绑定

所以,我们调用f1(15)的效果,与直接在fn内调用bar(15)的效果一样。这就是闭包的功能:将闭包函数closure视为一个整体,通过保留其符号表将函数体内申明的变量variable保留下来;通过在closure内定义其他函数operation实现对内部变量variable的操作,并将operation作为closure的返回结果,我们能够在closure外借助具有operation值的函数对象,完成对variable的操作。

其实对闭包的讨论可以到此为止,但如果我们将视野放到JavaScript的语法之外,我们发现:闭包的用法与面向对象语言非常类似;闭包类似于一个类,其中的变量类似私有成员,定义的函数类似于类的公有方法。因此,JavaScript这样一个只有函数而没有类的语言,借助闭包,也有了面向对象语言的能力。

下面这个例子有助于让你将闭包与面向对象语言中的类建立联系:

函数create_counter创建了一个计数器。

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    };
}

用法如下:

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

在这个例子里,外部代码无法访问到变量x,却可以通过返回的对象修改x的值。这时我们就意识到了闭包的强大,它甚至可以作为构建类似于类的一种工具。

闭包的常见用法

  1. 封装私有变量

前面提到的计数器就是一个很好的例子。

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    };
}
  1. 封装多参数函数,得到单参数函数

比如通过封装原生的Math.pow(x, y)函数得到pow2pow3

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}

var pow2 = make_pow(2); // x**2
var pow3 = make_pow(3); // x**3
  1. 模块模式 (module pattern)

用闭包模拟类

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }   
})();

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

上述代码定义了对象Counter

注意在上述代码中使用了”创建一个匿名函数并立即执行“的语法。

(function (x) {
    return x * x;
})(3); // 9

理论上讲,创建一个匿名函数并立即执行可以这么写:

function (x) { return x * x } (3);

但是由于JavaScript语法解析问题,会报SyntaxError错误,因此需要用括号把整个函数定义括起来:

(function (x) { return x * x }) (3);

通常,一个立即执行的匿名函数可以把函数体拆开,一般这么写:

(function (x) {
    return x * x;
})(3);

闭包的弊端

本来我觉得脚本语言很少考虑性能问题,不想提这一点的。然而我看到几乎每篇介绍闭包的博客都提到了用闭包的弊端,想必不是一个可以忽视的问题,因此在此补上。

如果不是某些特定任务需要使用闭包,在其他函数中创建函数是不明智的,因为闭包在处理速度和内存消耗方面对脚本性能有负面影响。

更多细节可以参考前文中提到的几篇参考文章,在此不再赘述。

上一篇下一篇

猜你喜欢

热点阅读