• 江太公:javascript count(a)(b)(c)(d)运行过程思考


    昨天,我弟抛给我一个js的题,使用类似标题那样的调用方法计算a*b*c*d以致无穷的实现方法。思考了半天,终于理清了它的运行过程,记录于下:

    函数体:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>a</title>
     5 </head>
     6 <body>
     7 <p id="a"></p>
     8 <script type="text/javascript">
     9 function count(x){
    10      var fn = function(y){
    11           return count(x*y);
    12      }
    13      fn.toString = function(){
    14           return x;
    15      };
    16      return fn;
    17 }
    18 alert(count(77)(33)(55));
    19 </script>
    20 </body>
    21 </html>

    这个函数的另外一个实现方法:

    <!DOCTYPE html>
    <html>
    <head>
        <title>a</title>
    </head>
    <body>
    <p id="a"></p>
    <script type="text/javascript">
    function count(x){
         count.toString = function(){
              return this.p;
         };
         count.p = (count.p || 1)* x;
         return count;
    }
    alert(count(77)(33)(55));
    </script>
    </body>
    </html>

    第一种:

    如果计算一个单值,count(77),fn被赋值一个函数function(){return count(x*y)},这个函数的目的是传另外参数并返回函数本体进行递归,当然此时只是赋值不会调用,接着将fn的内置构造函数重新定义为function(){return x;},其目的是当fn被调用的时候,自动调用toString方法,返回传过来的x值,最后返回被赋值函数的fn变量。此时fn的toString方法被调起,返回77。结束。

    而若计算count(77)(33),第一次运行过程跟上面类似,当fn被调起的时候实际类同于fn(33),也即33作为y参传入被赋值函数的fn变量函数,由于未退出count函数体,x参未被覆盖,还被驻留在内存中,因此在count(x*y)中被计算,成了count(77*33)也即count(2541),这个计算过程发生在fn被调用的时候,然后递归调用count,此时x变为2541,fn的toString的x将返回这个值。也即在结束跳出函数体的时候fn调用了toString最终返回2541。

    再计算count(77)(33)(55),前面运算过程同上,此时被传入的x是2541,fn被赋值函数体,fn的toString方法被重写,然后fn返回,如果被调起,则进入fn的函数体执行,此时的x2541还在内存中,y55被传入,count再次递归,x变成了2541*55,即139755,被作为toString自动调起的时候的返回值返回。

    第二种:

    给函数定义一个变量p,p的初始值被赋予了1,目的是在做第一次乘法运算的时候不改变x值,将其与传进来的x参数进行乘积后的结果返回给toString这个自调起的方法,当count在最后返回的时候,自动调用toString,计算count(33)(55)(77),它就是一步步从里到外计算的过程,每次都改变传入的this.p值,最终返回他。

    以上即是对这个问题实现后js内部运行过程的思考。不知对还是不对。有大神经过麻烦指教。

  • 相关阅读:
    mysql基础
    协程
    锁与队列
    线程练习
    线程
    并发编程
    进程
    操作系统发展史
    第六周----例行报告
    附加题找bug
  • 原文地址:https://www.cnblogs.com/jiangtian/p/count3-4-5-function.html
Copyright © 2020-2023  润新知