zoukankan      html  css  js  c++  java
  • javascript 函数 add(1)(2)(3)(4)实现无限极累加 —— 一步一步原理解析

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

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


    第一步首先,  我们要了解一个知识点: 函数的 toString()方法当我们直接alert() 一个函数的时候会被调用(或者 用 console.log() 打印一个函数的时候会被调用)。

    举一个例子:

    function s(a){
        return  a+1;
    }
    alert(s);
    

      

    第二步:好的,我们现在对函数 s 定义一个 toSting() 方法

    function s(a){
        return  a+1;
    }
    s.toString = function(){return 2;}
    console.log(s);
    typeof(s)
    

      

    定义了s.toString 方法后, 直接console.log(s) 的话,会打印出这个函数, 如果直接 alert(s)的话,我们可以看到会弹出 “2”, 我们检测一下s 的类型(typeof(s)),

    显然 s 是一个函数。

    第三步:好的,现在我们来给这个  s  函数包裹上一层"外套"  -:)

    function add(a){
     function s(a){
        return  a+1;
     }
     s.toString = function(){return a;}
     return s;
    }
    console.log(add(3));
     
    

      

    在上面的代码中,我们给之前的代码 包裹了一层,并且也修改了一下s.toSting() 方法,让它返回的是外面传递进来的参数a, 而不是之前固定的2。
    包裹了一层后,返回值为一个函数,这样就形成了一个闭包。 这样,我们在调用 add(3) 的时候,返回值其实是一个函数, 里面的 s 这个函数。

    但是,当我们 alert(s(3)) 的时候, 会弹出  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));
    
     
    

      

    到这里,我们可以看到,上面 console.log(add(1)(2)(3)(4)); 这句话打印出 一个函数,  function 10  , 其实就是当 alert(add(1)(2)(3)(4));的时候,会弹出 10.
    这就是 add(1)(2)(3)(4); 的实现过程,显然,我们这个累加函数是可以无限调用的 。-:) 小开心一下哈

    下面,我来谈一谈个人的思路和理解,还望大家能踊跃参数, 帮忙指点我一下,不甚感激!

    我觉得:整个实现过程就是两个关键点。
    1. 使用闭包, 同时要对JavaScript 的作用域链(原型链)有深入的理解;

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

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

    a) 执行add(1);   

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

    b) 执行add(1)(2);

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


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

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

  • 相关阅读:
    StarUML
    第二周周二日报
    第二周周一日报
    第一周周末报
    第一周周四日报
    第一周第三天日报
    软件开发总结
    构建之法总结
    《构建之法》第六章
    个人日志7
  • 原文地址:https://www.cnblogs.com/oxspirt/p/5436629.html
Copyright © 2011-2022 走看看