一道 js 闭包面试题的学习

最近看到一条有意思的闭包面试题,但是看到原文的解析,我自己觉得有点迷糊,所以自己重新做一下这条题目。

闭包面试题原题

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 输出的是o console.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 } }; }

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 闭包还不错的文章作为参考使用

原文发布于微信公众号 - 前端正义联盟(wnb020020)

原文发表时间:2018-07-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逆向技术

C语言第九讲,结构体

31620
来自专栏星回的实验室

js重修课[五]:类与模块

这个Range类中定义了一个接受两个参数的构造函数,和includes、foreach、toString三个实例方法,以及ZERO一个静态类方法。

13420
来自专栏Java帮帮-微信公众号-技术文章全总结

String中的null,以及String s;等区别详解

1、判断一个引用类型数据是否null。 用==来判断。 2、释放内存,让一个非null的引用类型变量指向null。这样这个对象就不再被任何对象应用了。等待JVM...

39140
来自专栏鸿的学习笔记

python的对象引用

Every object has an identity, a type and a value. An object’s identity never cha...

13830
来自专栏我有一个梦想

C++服务器开发之基于对象的编程风格

Thread.h #ifndef _THREAD_H_ #define _THREAD_H_ #include <pthread.h> #include <b...

207100
来自专栏LanceToBigData

JavaSE(四)之接口、访问控制

上面我们学习了几个修饰符,在开发中经常会用的到,所以必须熟练的掌握。接下来我学习一下接口和访问控制。 一、接口 一系列方法的声明,是一些方法特征的集合,一个接口...

25970
来自专栏一“技”之长

Swift讲解专题七——函数 原

        函数是有特定功能的代码段,函数会有一个特定的名称调用时来使用。Swift提供了十分灵活的方式来创建与调用函数。事实上在Swift,每个函数都是一...

8030
来自专栏Java后端技术

java中带继承类的加载顺序详解及实战

  在面试中,在java基础方面,类的加载顺序经常被问及,很多时候我们是搞不清楚到底类的加载顺序是怎么样的,那么今天我们就来看看带有继承的类的加载顺序到底是怎么...

11220
来自专栏鸿的学习笔记

Python对象的比较:is和==

这两个符号在Python的比较判断中应用广泛,但是这两者是有区别的,体现的是对象中的相等和标识符的概念。==符号比较的是两个对象是否相等,而is符号表达的则是标...

8120
来自专栏机器学习算法工程师

最长递增子序列

最长递增序列不要求数组元素连续问题,返回递增序列长度和递增序列。o(n^2)做法,顺序比较以第i个元素开头的递增序列即可。 利用动态规划来做,假设数组为1, -...

43560

扫码关注云+社区

领取腾讯云代金券