微信笔试 - 闭包问题解析

た入场券 2023-03-13 11:38 2阅读 0赞

### 微信笔试 - 闭包问题解析 ###

*  前言
 *  题目
 *  思路
 *  总结

# 前言 #

今天逛技术公众号的时候看到一个大佬分享的关于闭包的微信笔试题，自己尝试做了一下，发现还挺有趣的，在此记录一下。

# 题目 #

# 思路 #

这是一个很有趣的闭包问题。其实只要谈到闭包，第一反应就是【储存变量】。所以需要思考的就是什么情况下储存了变量，存了哪些变量。  
以下分为三个部分来解析。

一、retA 部分

1.  `var retA = test(0)`  
    结果：`undefined`
    
    解析：这个比较简单，调用了 `test(0)`。传了参数 a 为 0，参数 b 没传，所以打印 undefined。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：作用域内储存了 `a=0，b=undefined`。
2.  `retA.test(2)`  
    结果：`0`
    
    解析：调用对象 `{test:function(c){return test(c,a); }}` 内的 `test(2)`，此时函数内参数 c 为 2。a 为上次作用于储存值 0。由于又返回了 test (`return test(c,a)`)。所以又打印 b (`console.log(b)`)。此时的 b 就是传过去的 a。所以打印 0。
3.  继续执行 `retA.test(4); retA.test(8);` 与 `retA.test(2)` 一样，`retA` 作用域内储存的还是 `a=0，b=undefined`。所以 `console.log(b)` 打印的都是储存的 a ，都为 0。

二、retB 部分

1.  `var retB = test(0)`  
    结果：`undefined`
    
    解析：这个跟 retA 部分的 1 一样，就不赘述了。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：作用域内储存了 `a=0，b=undefined`。
2.  `.test(2)`  
    结果：`0`
    
    解析：由于调用了 `test(0)` 之后返回值是 `{test:function(c){return test(c,a); }}`。那么跟 retA 部分的 2 一样，`console.log(b)` 就是 0 。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：**注意这时候作用域内储存的就是 `a=2，b=0`。** `test(c,a)`中的参数 c = 2，a = 0（取外层作用于存储的值 a = 0）。到了 `test(a,b)` 调用的时候 a 就是 2，b 就是 0 了。实参与形参的对应。
3.  `.test(4)`  
    结果：`2`
    
    解析：由于调用了 `test(2)` 之后返回值依旧是 `{test:function(c){return test(c,a); }}`。此时 c = 4，a = 2（参照 2 `.test(2)` 中的储存值）。跟 2 `.test(2)` 中一样 `test(a,b)` 调用的时候 a 就是 4，b 就是 2 了。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：\*\*注意这时候作用域内储存的就是 `a=4，b=2`。
4.  `.test(8)`  
    结果：`4`
    
    解析：由于调用了 `test(4)` 之后返回值依旧是 `{test:function(c){return test(c,a); }}`。此时 c = 8，a = 4（参照 2 `.test(4)` 中的储存值）。跟 2 `.test(4)` 中一样 `test(a,b)` 调用的时候 a 就是 8，b 就是 4 了。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：作用域内储存的就是 `a=8，b=4`。

三、retC 部分

1.  `var retC = test('good').test('bad')`  
    结果：`undefined good`
    
    解析：这个跟前面的连调两次一样，一次打印是undefined，一次打印是第一次调用传过去之后储存的值（也就是第一次调用的参数）。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：作用域内储存了 `a=bad，b=good`。
2.  `retC.test('good')`  
    结果：`bad`
    
    解析：由于前面连调了两次 `test` 之后 `a=bad，b=good`。返回再调用 `test(c,a)` 的时候 c = ‘good’。a = ‘bad’。传参过去调用 `test(a,b)` 之后，`console.log(b)` 就是 ‘bad’ 。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：这时候作用域内储存的是 `a=good，b=bad`。
3.  `retC.test('bad')`  
    结果：\`bad
    
    解析：注意这里不是像 retB 部分一样链式调用。这里是继续调用的 retC。所以它储存的值应该是 1. `var retC = test('good').test('bad')` 中一样 `a=bad，b=good`。调用 `test(c,a)` 的时候 c = ‘bad’。a = ‘bad’。传参过去调用 `test(a,b)` 之后，`console.log(b)` 也是 ‘bad’ 。
    
    返回值：对象 `{test:function(c){return test(c,a); }}`。
    
    储存值：作用域内储存的就是 `a=bad，b=bad`。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70]

# 总结 #

上面有提到过闭包的核心就是【储存变量】。要考虑的点就是什么时候储存了变量，储存了哪些变量。

1.  retA 部分调用了`test(0)` 储存了值之后，后面 `retA.test(2) retA.test(4) retA.test(8)`都是使用 retA 的储存值（`a=0，b=undefined`）。所以`console.log(b)` 都是 0。
2.  retB 部分是链式调用。每次调用之后都魔性地偷换了 a 和 b 的值。所以每次 `console.log(b)` 出来之后打印的都是前面调用传入的值。
3.  retC 部分就是 retA 和 retB 的结合。前面部分是链式调用，然后储存值，之后分开调用，分开调用共用的都是前面链式调用储存的值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70]: /images/20230312/f516a9790d1d430184fc5599c3f1ae67.png