美文网首页
JS实现add(1)(2)(3)(4)的调用方式

JS实现add(1)(2)(3)(4)的调用方式

作者: FLYMOTH | 来源:发表于2018-10-24 12:59 被阅读0次

1.第一种

var add = function (m) {
 
    var temp = function (n) {
        return add(m + n);
    }
 
    temp.toString = function () {
        return m;
    }
 
    return temp;
};
 
 
add(3)(4)(5); // 12
add(3)(6)(9)(25); // 43

这个add函数可以无限次调用循环调用,并且把所有传进去的值相加,最后返回相加总数。这道题咋一看有点特别,但代码量极其少而精,重点技术在于:作用域、交替、匿名函数、toString的巧妙。
让我们来解释这个过程:add(3)(4)(5)
1、先执行add(3),此时m=3,并且返回temp函数;
2、执行temp(4),这个函数内执行add(m+n),n是此次传进来的数值4,m值还是上一步中的3,所以add(m+n)=add(3+4)=add(7),此时m=7,并且返回temp函数
3、执行temp(5),这个函数内执行add(m+n),n是此次传进来的数值5,m值还是上一步中的7,所以add(m+n)=add(7+5)=add(12),此时m=12,并且返回temp函数
4、关键性一步来了,后面没有传入参数,等于返回的temp函数不被执行而是打印,了解JS的朋友都知道对象的toString是修改对象转换字符串的方法,因此代码中temp函数的toString函数return m值,而m值是最后一步执行函数时的值m=12,所以返回值是12。
看到这其实就很明白了,代码中temp.toString的重写只是为了函数不执行时能够返回最后运算的结果值,所以这个地方是可以任意修改的,你让它返回什么它就返回什么,比如改写:

temp.toString = function () {
return “total : ” + m;
}

执行结果:

>>> add(3)(4)(5);
total : 12

2.第二种

function add(x) {
var sum = x;
var tmp = function (y) {
sum = sum + y;
return tmp;
};
tmp.toString = function () {
return sum;
};
return tmp;
}
console.log(add(1)(2)(3)); //6
console.log(add(1)(2)(3)(4)); //10

首先要一个数记住每次的计算值,所以使用了闭包,在tmp中记住了x的值,第一次调用add(),初始化了tmp,并将x保存在tmp的作用链中,然后返回tmp保证了第二次调用的是tmp函数,后面的计算都是在调用tmp, 因为tmp也是返回的自己,保证了第二次之后的调用也是调用tmp,而在tmp中将传入的参数与保存在作用链中x相加并付给sum,这样就保证了计算;

但是在计算完成后还是返回了tmp这个函数,这样就获取不到计算的结果了,我们需要的结果是一个计算的数字那么怎么办呢,首先要知道JavaScript中,打印和相加计算,会分别调用toString或valueOf函数,所以我们重写tmp的toString和valueOf方法,返回sum的值。

相关文章

  • JS实现add(1)(2)(3)(4)的调用方式

    1.第一种 这个add函数可以无限次调用循环调用,并且把所有传进去的值相加,最后返回相加总数。这道题咋一看有点特别...

  • JS中this关键字详解

    1、JS中函数的几种调用方式 (1)普通函数调用(2)作为对象方法调用(3)作为构造函数调用(4)apply/ca...

  • 字节一个面试题

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

  • iOS 和 js 交互

    js调用iOS代码 1、iOS定义方法 2、实现方法 3、js端实现方法 js给iOS传参数 1、单个参数 2、多...

  • 5.Quick-cocos2dx中TabBar的实现

    1.效果展示 2.调用方式 3.参数说明 4.代码实现

  • How To Create a Page

    Step 1) Add HTML: Step 2) Add CSS: Step 3) Add JS:

  • iOS中WkWebView与js交互

    1、初始化wkwebview 2、获取js返回的信息 3、原生调用js方法 4、拦截url(可在此方法中实现判断u...

  • 实现多网页换肤效果

    标签(空格分隔): js 实现网页换肤 1)html中 2)js中 3)调用getDefaultTheme("./...

  • 自定义alert弹窗

    1. 效果 2. 调用方式 3.创建Alert.vue组件 4.创建Alert构造js 5.main.js中Vue...

  • 2021-06-24

    1、// 用js 实现一个无限极累加的函数, 形如: add(1) //=> 1;add(1)(2) //=> 2...

网友评论

      本文标题:JS实现add(1)(2)(3)(4)的调用方式

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