最近看到一条有意思的闭包面试题,但是看到原文的解析,我自己觉得有点迷糊,所以自己重新做一下这条题目。
闭包面试题原题
function fun(n, o) { // ①
console.log(o);
return { // ②
fun: function(m) { // ③
return fun(m, n); // ④
}
};
}
// 第一个例子
var a = fun(0); // 返回undefined
a.fun(1); // 返回 ?
a.fun(2); // 返回 ?
a.fun(3); // 返回 ?
// 第二个例子
var b = fun(0)
.fun(1)
.fun(2)
.fun(3); //undefined,?,?,?
// 第三个例子
var c = fun(0).fun(1);
c.fun(2);
c.fun(3); //undefined,?,?,?
一、关于这个函数的执行过程
先大致说一下这个函数的执行过程:
① 初始化一个具名函数,具名函数就是有名字的函数,名字叫 fun。
② 第一个 fun 具名函数执行之后会返回一个对象字面量表达式,即返回一个新的object对象。
{ // 这是一个对象,这是对象字面量表达式创建对象的写法,例如{a:11,b:22}
fun: function(m) {
return fun(m, n);
}
}
③ 返回的对象里面含有fun这个属性,并且这个属性里面存放的是一个新创建匿名函数表达式function(m) {}
。
④ 在③里面创建的匿名函数会返回一个叫 fun 的具名函数return fun(m, n);
,这里需要说明一下这个 fun 函数返回之后的执行过程:
1. 返回 fun 函数,但默认不执行,因为在 js 里面,函数是可以保存在变量里面的。
2. 如果想要执行 fun 函数,那么首先会在当前作用域寻找叫fun 名字的具名函数,但是因为当前作用域里 fun 名字的函数是没有被定义的,所以会自动往上一级查找。
2.1 注解:当前的作用域里是一个新创建的对象,并且对象里面只有 fun 属性,而没有 fun 具名函数
2.2 注解:js 作用域链的问题,会导致他会不断地往上级链查找。
3. 在当前作用域没找到,所以一直往上层找,直到找到了顶层的 fun函数,然后执行这个顶层的 fun 函数。
4. 然后这两个 fun 函数会形成闭包,第二个 fun 函数会不断引用第一个 fun 函数,从而导致一些局部变量例如 n,o 得以保存。
所谓闭包:各种解释都有,但都不是很接地气,简单的来说就是在 js 里面,有一些变量(内存)可以被不断的引用,导致了变量(内存)没有被释放和回收,从而形成了一个独立的存在,这里涉及了js 的作用域链和 js 回收机制,结合两者来理解就可以了。
二、第一个例子的输出结果分析
1. var a = fun(0); // 返回 undefined
注解:
- 因为最外层的fun 函数
fun(n, o)
是有2个参数的,如果第二个参数没有传,那么默认就会被转换为 undefined,所以执行之后输出 undefined,因为 console.log 输出的是oconsole.log(o);
。 - 然后最外层这个 fun 函数会返回一个新对象,对象里面有一个属性,名为 fun,而这个fun 属性的值是一个匿名函数,它会返回
fun(m, n);
。
function fun(n, o) { // ①
console.log(o); // 这里首先输出了 n 的值为undefined
return { // ②
fun: function(m) { // ③
return fun(m, n); // ④
}
};
}
2. a.fun(1); // 返回 0
注解:
-
由于之前运行了
var a = fun(0);
,返回了一个对象,并且赋值给了变量a,所以 a 是可以访问对象里面的属性的,例如a.fun
。 -
a.fun(1);
这里意思是:- 访问 a 对象的 fun 属性,因为a 的 fun 属性的值保存的是一个匿名函数③,所以要使用的话需要加上
()
。 -
a.fun()
实际上调用的是 fun 属性里面的匿名函数,由于匿名函数返回的fun(m, n);
无法在当前作用域找到(因为当前作用域没有这个定义这个函数),所以会往上找,找到了顶层的函数fun(n, o)
,这样就会出现闭包的状态,顶层的fun 函数被内层的 fun 函数引用,之前①的fun(0)
的0被保存下来了,作为 n 参数的值。 -
a.fun(1)
这里传入了第一个参数1,所以就是 m=1,(因为③接收一个参数)。 - 所以④的
fun(m,n)
就会是fun(1,0)
,所以输出0
// 已经执行过一次var a = fun(0) function fun(n, o) { // ① console.log(o); return { // ② fun: function(m) { // ③ m=1 return fun(m, n); // ④ 不断引用①,闭包生成,①的n 的值被保存为0 } }; }
- 访问 a 对象的 fun 属性,因为a 的 fun 属性的值保存的是一个匿名函数③,所以要使用的话需要加上
3. a.fun(2); // 返回 0
注解:
- 这里传入一个参数,参数的值为2,跟上面的
a.fun(1);
是一样的流程执行。 - 最终是
fun(2,0)
执行,那么输出 o 就是0了
function fun(n, o) { // ①
console.log(o);
return { // ②
fun: function(m) { // ③
return fun(m, n); // ④
}
};
}
4. a.fun(3); // 返回 0
跟上面雷同,所以不做解释了。
二、第二个例子的输出结果分析
第二个例子其实是一个语句,只是进行了链式调用,所以会有一些不一样的处理。
1. 第一个返回 undefined
var b = fun(0) // 返回 undefined
注解:
- 第一个返回 undefined 毋容置疑了,所以不说。
2. 第二个返回 0
fun(0).fun(1) // 返回 0
注解:
- 执行
fun(0)
的时候返回了一个对象,对象里面有 fun 属性,而这个 fun 属性的值是一个匿名函数,这个匿名函数会返回一个 fun 函数。 - 当执行完
fun(0)
后,再链式直接执行.fun(1)
的时候,它是会调用前者返回的对象里的 fun 属性,并且传入了1作为第一个参数,即m=1,并且返回的 fun 函数跟前者形成闭包,会不断引用前者,所以 n=0 也被保存下来了。 - 所以最终执行的时候是
fun(m, n)
即fun(1,0)
,所以返回0
3. 第三个返回1
fun(0).fun(1).fun(2)
注解:
- 执行
fun(0)
的时候返回了一个对象,对象里面有 fun 属性,而这个 fun 属性的值是一个匿名函数,这个匿名函数会返回一个 fun 函数。 - 当执行完
fun(0)
后,再链式直接执行.fun(1)
的时候,它是会调用前者返回的对象里的 fun 属性,并且传入了1作为第一个参数,即m=1,并且返回的 fun 函数跟前者形成闭包,会不断引用前者,所以 n=0 也被保存下来了。 - 当再次链式直接执行
.fun(2)
的时候,这里使用的闭包是.fun(1)
返回的闭包,因为每次执行 fun 函数都会返回一个新对象,而.fun(2)
引用的是.fun(1)
,所以 n 的值被保留为1-
.fun(2)
返回的是fun(m, n)
,而这里会跟.fun(1)
(即fun(1, o)
)形成闭包,所以1为 n 的值被保留。 - 需要注意的是,js 作用域链只要找到可以使用的,就会马上停止向上搜索,所以
.fun(2)
找到.fun(1)
就马上停止向上搜索了,所以引用的是.fun(1)
的值。
-
4. 第四个返回是2
跟第三个返回类似,所以不做解释了。
第三个例子的输出结果分析
// 这里已经无需多说了,跟第二个例子类似。
var c = fun(0).fun(1); // 返回 undefined 和0
1. 第三个返回是1,第四个返回是1
c.fun(2); // 第三个返回 1
c.fun(3); // 第四个返回 1
注解:
-
基于第一个返回和第二个返回,n 已经被赋值为1了。
-
然后这里虽然多次执行了 fun 函数,但是因为没有再次形成闭包,n 的值没有再次被改变,所以一直保持着1.
为了避免原文被吃掉,所以我这里保留了截图,并且加了一篇解释 js 闭包还不错的文章作为参考使用。
网友评论