闭包的链式调用问题

本文通过实例解析了一段关于JavaScript闭包的代码,详细解释了闭包如何在不同的调用方式下产生不同的输出结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在网上瞎逛的时候看到一篇深度好文,详细解释了一个“哇,原来闭包还能这样”的问题。原文链接在这里,侵删

题目代码

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?
//问:三行a,b,c的输出分别是什么?

解决办法

我们首先分析一下这个函数,其实这个函数是返回了一个对象{fun:function(){}},这个函数就是闭包,因为它对函数内部作用域是可见的。好的,接下来我们继续分析a这个变量。
var a = fun(0),fun打印的是第二个参数,这里并没有定义,所以返回undefined。这个时候a应该变成了fun返回的对象的一个引用。写清楚点就是这样:

 a = {
  fun:function(m){
     return fun(m,0);//这里的n应该变成了第一次调用时的参数n,也就是0
  }
}

然后a.fun(1)就会调用fun(1,0),也就是输出0;然后又接着返回一个闭包,但是由于没有对象接收它,所以并不会改变a的引用。于是,a.fun(2);a.fun(3)都只会输出0;

接下来我们看b这个变量,var b = fun(0).fun(1).fun(2).fun(3)。初看下去很吓人,但是我们模拟计算机的运行过程一步一步看下去,其实也没有那么复杂。在上文中我们提到调用了第一个fun之后其实又返回了一个函数,在这个变量中,返回的对象其实就是一直在更新。别急,我们慢慢往下看。

第一步,b=fun(0),输出undefined,这里和a的执行步骤是一样的,这里就不赘述了。不同之处在于这一行代码是链式调用,后面调用的都是前面返回的引用。那么fun(0)其实返回的就是fun(m,0),同时输出undefined。而执行到fun(0).fun(1)的时候,实际上调用的就是:

fun(0) = {
  fun:function(m){
     return fun(m,0);//这里的n应该变成了第一次调用时的参数n,也就是0
  }
}

fun(0).fun(1) = fun(1,0) ;//输出0

从上面的代码可以看到输出0,同时fun(0).fun(1)返回如下:

{
 fun:function(m){
   return fun(m,1)//这个时候的n就变成上一次调用时传递进来的1
 }
}

那么它接下来调用fun(0).fun(1).fun(2)会输出什么呢?很显然就是输出1啦。同样的道理,fun(0).fun(1).fun(2).fun(3)就会输出2。所以执行这一句,控制台会打印出undefined,0,1,2。

而对于变量c,其实就是变量a和变量b的组合。可以说整道题考察的重点就是到底有没有对象来接收函数的返回值(引用),对c来说,它所执行的fun(2),fun(3)虽然返回了一个对象,但是没有像var c = fun(0).fun(1)一样被变量接收,所以就不会执行return里面的方法。

像这种问题虽然看起来复杂,但是细细往下理解发现原来也就那样。闭包,也就这样。

我想要拼搏的未来,最后发现你却已不在

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值