资讯专栏INFORMATION COLUMN

听说你还不理解JavaScript闭包

ysl_unh / 339人阅读

摘要:原因在于,分配给事件的函数是闭包,他们由函数定义构成,从函数的函数作用域获取。三个闭包由循环所创建,每个闭包具有同一个词法环境,环境中包含一个变量当的回调执行时,的值也随之确定,循环已经执行完毕,对象已经指向了列表的最后一项。

闭包(Closure)

</>复制代码

  1. 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中
词法作用域

看下面一个例子

</>复制代码

  1. function init() {
  2. var name = "Mozilla"; // name是局部变量
  3. function displayName() { // displayName()是内部函数,一个闭包
  4. alert(name); // 使用外部函数声明的变量
  5. }
  6. displayName();
  7. }
  8. init();

  init()创建了一个局部变量name和一个函数displayName()。函数displayName()是一个已经定义在init()内部的函数,并且只能在函数init()里面才能访问得到。函数displayName()没有自己的局部变量,但由于内部函数可以访问外部函数变量,displayName()可以访问到声明在外部函数init()的变量name,如果局部变量还存在的话,displayName()也可以访问他们。

闭包

看下面一个例子

</>复制代码

  1. function makeFunc() {
  2. var name = "Mozilla";
  3. function displayName() {
  4. alert(name);
  5. }
  6. return displayName;
  7. }
  8. var myFunc = makeFunc();
  9. myFunc();

  运行这段代码你会发现和之前init()的方法是一样的效果,但不同之处是,displayName()在执行之前,这个内部方法是从外部方法返回来的。
  首先,代码还是会正确运行,在一些编程语言当中,一个函数内的局部变量只存在于该函数的执行期间,随后会被销毁,一旦makeFunc()函数执行完毕的话,变量名就不能够被获取,但是,由于代码仍然正常执行,这显然在JS里是不会这样的。这是因为函数在JS里是以闭包的形式出现的,闭包是一个函数和词法作环境的组合,词法环境是函数被声明的那个作用域,这个执行环境包括了创建闭包时同一创建的任意变量,即创建的这个函数和这些变量处于同一个作用域当中。在这个例子当中,myFunc()是displayName()的函数实例,makeFunc创建的时候,displayName随之也创建了。displayName的实例可以获得词法作用域的引用,在这个词法作用域当中,存在变量name,对于这一点,当myFunc调用的话,变量name,仍然可以被调用,因此,变量"Mozilla"传递给了alert函数。

这里还有一个例子 - 一个makeAdder函数

</>复制代码

  1. function makeAdder (x) {
  2. return function(y) {
  3. return x + y;
  4. }
  5. }
  6. var add5 = makeAdder(5);
  7. var add10 = makeAdder(10);
  8. console.log(add5(2)); // 7
  9. console.log(add10(2)); // 12

  在这个例子当中,我们定义了一个函数makeAdder(x),传递一个参数x,并且返回一个函数,这个返回函数接收一个参数y,并返回x和y的和。
  实际上,makeAdder是一个工厂模式 - 它创建了一个函数,这个函数可以计算特定值的和。在上面这个例子当中,我们使用工厂模式来创建新的函数 - 一个与5进行加法运算,一个与10进行加法运算。add5和add10都是闭包,他们共享相同的函数定义,但却存储着不同的词法环境,在add5的词法环境当中,x为5;在add10的词法环境当中,x变成了10。

闭包的实践

  闭包是很有用的,因为他让你把一些数据(词法环境)和一些能够获取这些数据的函数联系起来,这有点和面向对象编程类似,在面向对象编程当中,对象让我们可以把一些数据(对象的属性)和一个或多个方法联系起来
  因此,你能够像对象的方法一样随时使用闭包。实际上,大多数的前端JS代码都是事件驱动性的 - 我们定义一些事件,当这个事件被用户所触发的时候(例如用户的点击事件和键盘事件),我们的事件通常会带上一个回调:即事件触发所执行的函数。例如,假设我们希望在页面上添加一些按钮,这些按钮能够调整文字的大小,实现这个功能的方式是确定body的字体大小,然后再设置页面上其他元素(例如标题)的字体大小,我们使用em作为单位。

</>复制代码

  1. body {
  2. font-family: Helvetica, Arial, sans-serif;
  3. font-size: 12px;
  4. }
  5. h1 {
  6. font-size: 1.5em;
  7. }
  8. h2 {
  9. font-size: 1.2em;
  10. }

  我们设置的调节字体大小的按钮能够改变body的font-size,并且这个调节能够通过相对字体单位,反应到其他元素上,

</>复制代码

  1. function makeSizer(size) {
  2. return function() {
  3. document.body.style.fontSize = size + "px";
  4. };
  5. }
  6. var size12 = makeSizer(12);
  7. var size14 = makeSizer(14);
  8. var size16 = makeSizer(16);

  size12,size14,size16是三个分别把字体大小调整为12,14,16的函数,我们可以把他们绑定在按钮上。

</>复制代码

  1. document.getElementById("size-12").onclick = size12;
  2. document.getElementById("size-14").onclick = size14;
  3. document.getElementById("size-16").onclick = size16;

</>复制代码

  1. 12
  2. 14
  3. 16
通过闭包来封装私有方法

  类似JAVA语言能够声明私有方法,意味着只能够在相同的类里面被调用,JS无法做到这一点,但却可以通过闭包来封装私有方法。私有方法不限制代码:他们提供了管理命名空间的一种强有力方式。
  下面代码阐述了怎样使用闭包来定义公有函数,公有函数能够访问私有方法和属性。

</>复制代码

  1. var counter = (function() {
  2. var privateCounter = 0;
  3. function changeBy(val) {
  4. privateCounter += val;
  5. }
  6. return {
  7. increment: function() {
  8. changeBy(1);
  9. },
  10. decrement: function() {
  11. changeBy(-1);
  12. },
  13. value: function() {
  14. return privateCounter;
  15. }
  16. };
  17. })();
  18. console.log(counter.value()); // logs 0
  19. counter.increment();
  20. counter.increment();
  21. console.log(counter.value()); // logs 2
  22. counter.decrement();
  23. console.log(counter.value()); // logs 1

  在先前的例子当中,每个闭包具有他们自己的词法环境,在这个例子中,我们创建了一个多带带的词法环境,这个词法环境被3个函数所共享,这三个函数是counter.increment, counter.decrement和counter.value
  共享的词法环境是由匿名函数创建的,一定义就可以被执行,词法环境包含两项:变量privateCounter和函数changeBy,这些私有方法和属性不能够被外面访问到,然而,他们能够被返回的公共函数访问到。这三个公有函数就是闭包,共享相同的环境,JS的词法作用域的好处就是他们可以互相访问变量privateCounter和changeBy函数

</>复制代码

  1. var makeCounter = function() {
  2. var privateCounter = 0;
  3. function changeBy(val) {
  4. privateCounter += val;
  5. }
  6. return {
  7. increment: function() {
  8. changeBy(1);
  9. },
  10. decrement: function() {
  11. changeBy(-1);
  12. },
  13. value: function() {
  14. return privateCounter;
  15. }
  16. }
  17. };
  18. var counter1 = makeCounter();
  19. var counter2 = makeCounter();
  20. alert(counter1.value()); /* Alerts 0 */
  21. counter1.increment();
  22. counter1.increment();
  23. alert(counter1.value()); /* Alerts 2 */
  24. counter1.decrement();
  25. alert(counter1.value()); /* Alerts 1 */
  26. alert(counter2.value()); /* Alerts 0 */

  两个计数器counter1和counter2分别是互相独立的,每个闭包具有不同版本的privateCounter,每次计数器被调用,词法环境会改变变量的值,但是一个闭包里变量值的改变并不影响另一个闭包里的变量。

循环中创建闭包:常见错误

下面一个例子

</>复制代码

  1. Helpful notes will appear here

  2. E-mail:

  3. Name:

  4. Age:

</>复制代码

  1. function showHelp(help) {
  2. document.getElementById("help").innerHTML = help;
  3. }
  4. function setupHelp() {
  5. var helpText = [
  6. {"id": "email", "help": "Your e-mail address"},
  7. {"id": "name", "help": "Your full name"},
  8. {"id": "age", "help": "Your age (you must be over 16)"}
  9. ];
  10. for (var i = 0; i < helpText.length; i++) {
  11. var item = helpText[i];
  12. document.getElementById(item.id).onfocus = function() {
  13. showHelp(item.help);
  14. }
  15. }
  16. }
  17. setupHelp();

  helpText 数组定义了三个有用的hint,每个分别与输入框的id相对应,每个方法与onfocus事件绑定起来。当你运行这段代码的时候,不会像预期的那样工作,不管你聚焦在哪个输入框,始终显示你的age信息。
  原因在于,分配给onfocus事件的函数是闭包,他们由函数定义构成,从setupHelp函数的函数作用域获取。三个闭包由循环所创建,每个闭包具有同一个词法环境,环境中包含一个变量item.help,当onfocus的回调执行时,item.help的值也随之确定,循环已经执行完毕,item对象已经指向了helpText列表的最后一项。解决这个问题的方法是使用更多的闭包,具体点就是提前使用一个封装好的函数:

</>复制代码

  1. function showHelp(help) {
  2. document.getElementById("help").innerHTML = help;
  3. }
  4. function makeHelpCallback(help) {
  5. return function() {
  6. showHelp(help);
  7. };
  8. }
  9. function setupHelp() {
  10. var helpText = [
  11. {"id": "email", "help": "Your e-mail address"},
  12. {"id": "name", "help": "Your full name"},
  13. {"id": "age", "help": "Your age (you must be over 16)"}
  14. ];
  15. for (var i = 0; i < helpText.length; i++) {
  16. var item = helpText[i];
  17. document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  18. }
  19. }
  20. setupHelp();

  上面代码运行正常,回调此时不共享一个词法环境,makeHelpCallback函数给每个回调创造了一个词法环境,词法环境中的help指helpText数组中对应的字符串,使用匿名闭包来重写的例子如下:

</>复制代码

  1. function showHelp(help) {
  2. document.getElementById("help").innerHTML = help;
  3. }
  4. function setupHelp() {
  5. var helpText = [
  6. {"id": "email", "help": "Your e-mail address"},
  7. {"id": "name", "help": "Your full name"},
  8. {"id": "age", "help": "Your age (you must be over 16)"}
  9. ];
  10. for (var i = 0; i < helpText.length; i++) {
  11. (function() {
  12. var item = helpText[i];
  13. document.getElementById(item.id).onfocus = function() {
  14. showHelp(item.help);
  15. }
  16. })(); // Immediate event listener attachment with the current value of item (preserved until iteration).
  17. }
  18. }
  19. setupHelp();

如果你不想使用闭包,你可以使用ES6的let关键字

</>复制代码

  1. function showHelp(help) {
  2. document.getElementById("help").innerHTML = help;
  3. }
  4. function setupHelp() {
  5. var helpText = [
  6. {"id": "email", "help": "Your e-mail address"},
  7. {"id": "name", "help": "Your full name"},
  8. {"id": "age", "help": "Your age (you must be over 16)"}
  9. ];
  10. for (var i = 0; i < helpText.length; i++) {
  11. let item = helpText[i];
  12. document.getElementById(item.id).onfocus = function() {
  13. showHelp(item.help);
  14. }
  15. }
  16. }
  17. setupHelp();

  这个例子使用let代替var,所以,每个闭包绑定了块级作用域,也就意味着不需要额外的闭包

性能考虑

  如果闭包在实际案例中是不被允许的,在一个函数中就不一定再创建一个函数,因为这会影响脚本的性能,例如处理的速度和内存的消耗。例如,当创建一个对象,对象的方法应该跟对象的原型联系起来而不是在对象的构造器里定义,这是因为无论什么时候构造器被调用,方法都会被重新分配

下面一个例子

</>复制代码

  1. function MyObject(name, message) {
  2. this.name = name.toString();
  3. this.message = message.toString();
  4. this.getName = function() {
  5. return this.name;
  6. };
  7. this.getMessage = function() {
  8. return this.message;
  9. };
  10. }

前面的代码没有充分利用闭包,我们重写如下

</>复制代码

  1. function MyObject(name, message) {
  2. this.name = name.toString();
  3. this.message = message.toString();
  4. }
  5. MyObject.prototype = {
  6. getName: function() {
  7. return this.name;
  8. },
  9. getMessage: function() {
  10. return this.message;
  11. }
  12. };

  然而,我们不建议重新定义原型,下面的例子中,给原型分别定义方法而不是重新定义整个原型,这样会改变constructor的指向。

</>复制代码

  1. function MyObject(name, message) {
  2. this.name = name.toString();
  3. this.message = message.toString();
  4. }
  5. MyObject.prototype.getName = function() {
  6. return this.name;
  7. };
  8. MyObject.prototype.getMessage = function() {
  9. return this.message;
  10. };

  在前面两个例子中,继承原型可以被所有对象所共享并且在每个对象创建的同时都不必定义方法。

参考

MDN closure

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93434.html

相关文章

  • 听说还不理解JavaScript闭包

    摘要:原因在于,分配给事件的函数是闭包,他们由函数定义构成,从函数的函数作用域获取。三个闭包由循环所创建,每个闭包具有同一个词法环境,环境中包含一个变量当的回调执行时,的值也随之确定,循环已经执行完毕,对象已经指向了列表的最后一项。 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中 词法作用域 看下面一个例子 function init() { var n...

    everfly 评论0 收藏0
  • 听说还不理解JavaScript闭包

    摘要:原因在于,分配给事件的函数是闭包,他们由函数定义构成,从函数的函数作用域获取。三个闭包由循环所创建,每个闭包具有同一个词法环境,环境中包含一个变量当的回调执行时,的值也随之确定,循环已经执行完毕,对象已经指向了列表的最后一项。 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中 词法作用域 看下面一个例子 function init() { var n...

    sorra 评论0 收藏0
  • 闭包详解一

    摘要:再看一段代码这样就清晰地展示了闭包的词法作用域能访问的作用域将当做一个值返回执行后,将的引用赋值给执行,输出了变量我们知道通过引用的关系,就是函数本身。 在正式学习闭包之前,请各位同学一定要确保自己对词法作用域已经非常的熟悉了,如果对词法作用域还不够熟悉的话,可以先看: 深入理解闭包之前置知识---作用域与词法作用域 前言 现在去面试前端开发的岗位,如果你的面试官也是个前端,并且不是太...

    cnio 评论0 收藏0
  • 【进阶2-2期】JavaScript深入之从作用域链理解闭包

    摘要:使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数,也不是局部变量,所以是自由变量。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本周正式开始前端进阶的第二期,本周的主题是作用域闭包,今天是第7天。 本计划一共28期,每期重点攻克一个面试重难点,如果你还不了解本进阶计...

    simpleapples 评论0 收藏0
  • JavaScript闭包,只学这篇就够了

    摘要:当在中调用匿名函数时,它们用的都是同一个闭包,而且在这个闭包中使用了和的当前值的值为因为循环已经结束,的值为。最好将闭包当作是一个函数的入口创建的,而局部变量是被添加进这个闭包的。 闭包不是魔法 这篇文章使用一些简单的代码例子来解释JavaScript闭包的概念,即使新手也可以轻松参透闭包的含义。 其实只要理解了核心概念,闭包并不是那么的难于理解。但是,网上充斥了太多学术性的文章,对于...

    CoderBear 评论0 收藏0

发表评论

0条评论

ysl_unh

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<