JavaScript之闭包

Mr_houzi 发布于2019-08-23 17:15 / 334人阅读

摘要：而闭包的妙处在于，当函数在执行完毕后它的活动对象不会被销毁，因为匿名函数的作用域链仍然在引用函数的活动对象它的作用域链会被销毁。

一、闭包

闭包是指有权访问另一个函数作用域中的变量的函数。
创建闭包的常用方式是，在一个函数内部创建另一个函数。

请看以下代码：我们在createComparisonFunction函数里创建了一个闭包

function createComparisonFunction(propertyName) {
  return function(obj1, obj2) {
    var val1 = obj1[propertyName];
    var val2 = obj2[propertyName];
    if (val1 < val2) {    //若返回负数，则第一个参数位于第二个参数之前
      return -1;
    } else if (val1 > val2) {    //若返回正数，则第一个参数位于第二个参数之后
      return 1;
    } else {
      return 0;
    }
  };
}
//创建函数
var compareNames = createComparisonFunction("name");
//调用函数
var result = compareNames({ name: "Nicholas" }, { name: "Greg" });

当某个函数第一次被调用时，会创建一个执行环境（execution context）和相应的作用域链，并把作用域链赋值给一个特殊的内部属性（[[Scope]]）。然后，使用this、arguments和其他命名参数的值来初始化函数的活动对象（activation object）。但在作用域链中，外部函数的活动对象始终位于第二位，外部函数的外部函数的活动对象处于第三位，……直至作为作用域链终点的全局执行环境。

讲这么多，其实就是下面这幅图：

普通函数执行完毕后，局部活动对象就会被销毁。
而闭包的妙处在于，当createComparisonFunction()函数在执行完毕后：

它的活动对象不会被销毁，因为匿名函数的作用域链仍然在引用createComparisonFunction()函数的活动对象；

它的作用域链会被销毁。

当匿名函数都被销毁之后，createComparisonFunction()函数的活动对象才会被销毁。所以，记得要解除对匿名函数的引用，以释放内存。

//解除对匿名函数的引用（以便释放内存）
compareNames = null;

对了，createComparisonFunction()函数还顺便是个比较函数，可用于sort。

var data = [{ name: "Zah", age:20 }, { name:"Amy", age:30 }];
data.sort(createComparisonFunction("name"));
//data: 
//0: Object { name: "Amy", age: 30 }
//1: Object { name: "Zah", age: 20 }
data.sort(createComparisonFunction("age"));
//data: 
//0: Object { name: "Zah", age: 20 }
//1: Object { name: "Amy", age: 30 }

二、闭包中的this

this对象是在运行时基于函数的执行环境绑定的：

在全局函数中，this等于window

当函数作为某个对象的方法调用时，this等于那个对象

匿名函数的执行环境具有全局性，this通常等于window

请看以下代码：

var name = "The Window";
var obj = {
  name: "My Obj",
  getNameFunc: function() {
    return function() {
      return this.name;
    };
  }
};
alert(obj.getNameFunc()()); //"The Window"（非严格模式下）

为啥不是"My Obj"？说好的闭包能访问到外部作用域的变量值呢？
对，这话是没错的。但是，return的这个匿名函数，没有被修改过this，它的this对象依然指向window。当沿着作用域链搜索this值的时候，先搜索到了自己的活动对象的this值，便停止搜索，自然而然this等于window了。
讲人话就是：先吃自己碗里的this。
那我就是想吃别人碗里的this怎么办？（傲娇.jpg）

var name = "The Window";
var obj = {
  name: "My Obj",
  getNameFunc: function() {
    var that = this;    //加一个变量that引用obj
    return function() {
      return that.name;
    };
  }
};
alert(obj.getNameFunc()()); //"My Obj"

三、模仿块级作用域

我们一定遇到过这个问题：

用setTimeOut输出1-10，一秒一个

最简单的方法当然是：

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(i);
  }, 1000*i);
}

那我偏要用闭包呢：

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() {
      alert(i);
    }, 1000*i)
  })(i)
}

每次循环中，立即执行匿名函数，并传入一个参数i。由于函数参数是按值传递的，所以就会把变量i的当前值复制给参数i，从而输出预期的i值。
而这个就是我们手动模仿出来的块级作用域（私有作用域）：

  (function() {
    // 块级作用域
  })()

将函数声明包含在一对圆括号中，代表它是一个函数表达式。紧随其后的圆括号会立即调用这个函数。因为JavaScript将function关键字当作一个函数声明的开始，函数声明后面不能跟圆括号，而函数表达式可以跟圆括号。

未完待续~若有不足，请多指教，不胜感激！

以上代码借鉴于《Javascript高级程序设计》

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

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

JavaScript深入之闭包

摘要：深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义对闭包的定义为闭包是指那些能够访问自由变量的函数。 JavaScript深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义 MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。那什么是自由变量呢？自由变量是指在函数中使用的，但既不是函数参数也...

caige 2019-08-20 16:07 评论0 收藏0
【进阶2-3期】JavaScript深入之闭包面试题解

摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

alanoddsoff 2019-08-23 13:47 评论0 收藏0
【进阶2-2期】JavaScript深入之从作用域链理解闭包

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

simpleapples 2019-08-23 13:47 评论0 收藏0
进击JavaScript之（三）玩转闭包

摘要：为了更好的理解，在阅读此文之前建议先阅读上一篇进击之词法作用域与作用域链什么是闭包闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。在中函数构成闭包。为了更好的理解，在阅读此文之前建议先阅读上一篇《进击JavaScript之词法作用域与作用域链》 1.什么是闭包闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。所谓的闭包就是...

cyixlq 2019-08-20 10:30 评论0 收藏0
【译】理解JavaScript：闭包

摘要：当面试中让我解释一下闭包时我懵逼了。这个解释开始可能有点晦涩，让我们抽丝剥茧摘下闭包的真面目。此文不详述作用域有专门的主题阐述，不过作用域是理解闭包原理的基础。这才是闭包的真正便利之处。闭包使用不当就会很坑。原文链接为什么深度学习JavaScript？ JavaScript如今是最流行的编程语言之一。它运行在浏览器、服务器、移动设备、桌面应用，也可能包括冰箱。无需我举其他再多不相干...

岳光 2019-08-22 17:17 评论0 收藏0
【前端工程师手册】JavaScript之闭包

摘要：闭包确实是一个说烂了的概念，校招社招都会被问到，今天总结一番。先下定义，闭包是函数和该函数的词法作用域的组合。在这个栗子里，函数以及它对变量的引用就构成了闭包。闭包和作用域对于闭包和作用域的关系，我的理解是闭包其实就是作用域的延伸。闭包确实是一个说烂了的概念，校招社招都会被问到，今天总结一番。先下定义，闭包是函数和该函数的词法作用域的组合。其实这个定义是比较教条的，可以直白的理解为闭...

CarlBenjamin 2019-08-22 17:11 评论0 收藏0