美文网首页前端知识点
实现类似add(1)(2)(3)的效果

实现类似add(1)(2)(3)的效果

作者: 练习时长2年半的个人练习生 | 来源:发表于2019-02-28 14:25 被阅读0次

问题:我们有一个需求,用js 实现一个无限极累加的函数, 形如 add(1) //=> 1; add(1)(2) //=> 3; add(1)(2)(3) //=> 6; add(1)(2)(3)(4) //=> 10; 以此类推。。。。。

乍一看很神奇, 下面我将一步一步实现一个这样的 add()函数。

  • 第一步: 首先, 我们要了解一个知识点: 函数的 toString()方法当我们直接alert() 一个函数的时候会被调用(或者 用 console.log() 打印一个函数的时候会被调用)。
function s(a){
    return  a+1;
}
alert(s);
//输出值
//function s(a){
  //  return  a+1;
//}
//alert(s);
  • 第二步:好的,我们现在对函数 s 重写一个 toSting() 方法
function s(a){
    return  a+1;
}
s.toString = function(){return 2;}
console.log(s);//2
typeof(s)//function
  • 第三步: 好的,现在我们来给这个 s 函数包裹上一层"外套"
function add(a){
 function s(a){
    return  a+1;
 }
 s.toString = function(){return a;}
 return s;
}
console.log(add(3));//3

在上面的代码中,我们给之前的代码 包裹了一层,并且也修改了一下s.toSting() 方法,
包裹了一层后,返回值为一个未调用的函数s,这样就形成了一个闭包。 这样,我们在调用 add(3) 的时候,返回值其实是一个函数s,当我们alert或者console这个函数时会调用这个函数的tostring方法,所以返回的是3

  • 第四步:好的,下面是最后一步,“见证奇迹的时刻到了”————
function add(a){
 
 function s(b){
    a = a + b;
    return s;
 }
 s.toString = function(){return a;}
 return s;
}
console.log(add(1)(2)(3)(4));

我觉得:整个实现过程就是两个关键点

  1. 使用闭包, 同时要对JavaScript 的作用域链(原型链)有深入的理解;

  2. 重写函数的 toSting()方法;**

好的,对add(1)(2)(3); 一步一步分析:

  • 执行add(1);

返回的是里面的 s 函数, 通过闭包,s 函数里面可以访问到 变量 a=1; 所以 当我们 alert(add(1)); 的时候, 调用的 toSting()方法会将作用域(原型链)里面的 a = 1 弹出来。

  • 执行add(1)(2);

<===等价于===> s(2); 这里面相当于 把 2 传递给 s()函数里面的 b , 让作用域(原型链)里面的 a = a+b ,此时 a = 3, 继续保存在作用域中了。 然后还是返回 s 函数。

  • 执行 add(1)(2)(3);

<===等价于===> s(3);和上面 b) 中的分析一样,只是更新了作用域中的 a = 6 了,然后同样是返回 s 函数。

相关文章

  • 实现类似add(1)(2)(3)的效果

    问题:我们有一个需求,用js 实现一个无限极累加的函数, 形如 add(1) //=> 1; add(1)(2) ...

  • 字节一个面试题

    实现 如下效果add(2,3,4).sumOf()add(2)(3,4).sumOf() // 9add(2)(3...

  • 实现add(1)(2)(3)//6 的效果

    问题: 我们有一个需求,用js 实现一个无限极累加的函数, 形如add(1) //=> 1;add(1)(2) ...

  • js中的valueOf和toString的隐式调用

    柯里化函数 实现一个函数:add(1,2)(3) -> 6add(1)(2)(3) -> 6add(1)(2)(...

  • 柯里化函数

    // 实现一个add方法,使计算结果能够满足如下预期:add(1)(2)(3) = 6;add(1, 2, 3)(...

  • 实现add(1)(2) =3

    光这个的话,可以通过闭包的方式实现了 我给这个加了一个难度,如何才能实现一直调用 无限链式调用实现的关键在于 对象...

  • 一些常见面试题

    递归实现阶乘 实现 add(2)(3) add(2, 3) 都可以求出结果5的add函数() 提供数组[5, 2...

  • CoreAnimation的粒子效果

    粒子效果 效果1 代码实现 效果2 代码实现 效果3 效果4 代码实现

  • 实现(3).add(2).minus(1)

    Number.prototype 所有 Number 实例都继承自 Number.prototype

  • JS类型转换

    有一道面试题是: 实现一个函数,运算结果可以满足如下预期结果:add(1)(2) //3add(1,2,3)(10...

网友评论

    本文标题:实现类似add(1)(2)(3)的效果

    本文链接:https://www.haomeiwen.com/subject/salhuqtx.html