toozhuang / fe-interviewpreparation Goto Github PK

function wait(message) {
  console.log("pass in message: ", message);
  setTimeout(function timer() {
    console.log(message);
  }, 1000);
}

wait("Hello, closure!");

首先, 注意这个setTimeout其实就是告诉我们, timmer的运行是在1秒钟之后才运行的, 也就是是在wait()这个函数运行完毕(1秒). 按照我们之前的理论, 这个地方的message应该是undefined的才对, 因为已经被回收了.

内部函数 timer 依然拥有覆盖着 wait() 内部作用域的闭包, 这个是一个比较特别的例子, 但是核心也是闭包的**.

实质上无论何时何地只要你将函数作为头等的值看待并将它们传来传去的话，你就可能看到这些函数行使闭包。计时器、事件处理器、Ajax请求、跨窗口消息、web worker、或者任何其他的异步（或同步！）任务，当你传入一个回调函数，你就在它周围悬挂了一些闭包！

循环 + 闭包


for (var i=1; i<=5; i++) {
	setTimeout( function timer(){
		console.log( i );
	}, i*1000 );
}

我们试图暗示在迭代期间，循环的每次迭代都“捕捉”一份对 i 的拷贝。但是，虽然所有这5个函数在每次循环迭代中分离地定义，由于作用域的工作方式，它们都闭包在同一个共享的全局作用域上，而它事实上只有一个 i。

这么说来，所有函数共享一个指向相同的 i 的引用是理所当然的。循环结构的某些东西往往迷惑我们，使我们认为这里有其他更精巧的东西在工作。但是这里没有。这与根本没有循环，5个超时回调仅仅一个接一个地被声明没有区别。

好了，那么，回到我们火烧眉毛的问题。缺少了什么？我们需要更多铃声被闭包的作用域。明确地说，我们需要为循环的每次迭代都准备一个新的被闭包的作用域。

上面的结果并不能得到我们想要的result, 虽然也是闭包, 但是我们要为他们准备不同的闭包, 使用不同的引用才可以.

for (var i=1; i<=5; i++) {
	(function(){
		var j = i;
		setTimeout( function timer(){
			console.log( j );
		}, j*1000 );
	})();
}

下面这种更好理解一点, 也就是, 虽然输出的是12345, 但是, 并不是我们想的那种输出方式, 而是等整个for循环完成以后才进行这个异步. 但是啊, 因为异步这个异步维护了自己内部的5个不同的j的值, 所以其实是指向了五个不同的闭包作用域. 差不多能这么理解吧, 感觉还是挺吊的.

for (var i = 1; i <= 5; i++) {
  console.log("后面的函数其实是闭包, 并且在这个console搞5遍之后才运行之后");
  (function() {
    var j = i;
    setTimeout(function timer() {
      console.log(j);
    }, j * 10);
  })();
}

进一步延伸, 记得之前看过let是自己的独有块, 而上面我们写的按个立即执行function的原因也是要用function来维护自己的块. 那么其实可以改成

for (var i = 1; i <= 5; i++) {
  console.log("后面的函数其实是闭包, 并且在这个console搞5遍之后才运行之后");
  let j = i;
  setTimeout(function timer() {
    console.log(j);
  }, j * 10);
}

这样就不需要用立即执行函数来解决这个问题了.

再进一步到位的话,

for (let i=1; i<=5; i++) {
	setTimeout( function timer(){
		console.log( i );
	}, i*1000 );
}

这也可以, 因为每一次的i都是属于自己的一个let块, 也就是:

在用于 for 循环头部的 let 声明被定义了一种特殊行为。这种行为说，这个变量将不是只为循环声明一次，而是为每次迭代声明一次。并且，它将在每次后续的迭代中被上一次迭代末尾的值初始化。

真是太蛋疼但是知道原理以后, 又觉得太NB了 🐂🍺

JS中作用域的理解以及往闭包的延伸

简单理解一下作用域的概念(大概)

首先深刻的理解作用域能让自己更加的理解闭包. 虽然平时开发中从来没遇到过闭包的使用case, 但肯定还是会遇到的. 就像加减乘除不一定在生活中都能遇到, 但遇到的时候不会就GG了.

先用最简单的, 什么是作用域?

作用域是可访问变量的集合。
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
也可以理解为作用域就是一个生命周期.
其实，我们写的函数如果不经过封装，也会是全局变量，他的生命周期也就是全局作用域；

自己对作用域链的简单理解(From zhihu)

函数创建时(定义) 会创建一个作用域链接(后面会详细解释), 这个是会包含全局/嵌套父函数的作用域链. 当这个函数进行执行的时候(运行, call), 会产生一个居于执行上下文产生的一个新的作用域链.

用更严谨一点的话来说, 作用域链的非自己的部分, 在函数对象建立的时候就建立了, 作用域链的静态的所有函数(变量,对象)共享同一个作用域链.

当函数开始执行的时候, 会有一个新的作用域链, 他们会建立起来一个联系.

参考一下zhihu上一个答主的回答, 进一步加深理解,

知道的新的知识点为变量对象是保存在内存中的, 代码无法直接访问.

引入一个 function实例:

var pubvar = 1;
function pub () {
  var pravar = 2;
  return pubvar + pravar;
}

alert(pub(2));     //调用pub()函数

参考最上面我的理解, 函数在定义/创建而非运行的时候,就会创建一个作用域链(SCOPE CHAIN), 结合整个运行环境(浏览器).

当后面, alert 进行 pub的调用的时候, 又会创建一个执行环境B, 也就是上文我们说的, 一开始有一个static的作用域链, 当函数运行以后, 又会产生一个基于这个作用域链的新的作用链.

这个作用域链上下分为活动对象区域和变量对象区域. 其实可以理解, 当最开始声明的时候, 他只是一个静态的, 放在了变量对象区域里面, 而当 alert trigger的时候, 会生成一个新的pub内部的函数环境, 这个函数环境是处于整体window的环境的活动对象区域里面的.

也就是, 有的代码是有动态性的(比如这个函数 pub 被call了, 所以就是动态性)

于是我们更新一波代码:

var pubvar = 1;
function pub () {
  var pravar = 2;
  return pubvar + pravar;
}

var pubvar2 = 3;
function pub2 () {
  var pravar = 2;
  return pubvar2 + pravar;
}

alert(pub(2));      //调用pub()函数

这个时候, 可以看到变量对象和初始的执行环境如下