zoukankan      html  css  js  c++  java
  • js编译器的一些简单原理

    有没有发现在写代码的时候,往往会遇到一些莫名其妙的错误,然后时间紧急不得不去网上查阅一些代码。虽然要实现的功能解决了,但是看被拷贝的代码好多真心看不懂,以后遇到诸如此类的问题,如果查阅不到这些代码的话还是不会。所以今天给大分享一下内部原理的问题

    ###1.js编译器编译的几条基本原则

       >a.js预编译:解释函数声明,忽略表达式;

       >b.运行期间获取变量会有底层向顶层依次查找,直到找到为止(华续以前已经分享过);

       >c.变量的定义会被提前到body下,即所属代码最前面声明;

       >d.function func(){}这种声明会被js编译器解释成var func = function(){}这种格式,是不是看了几条规则,不知道我说的什么,没关系,可能我总结的不好,看下面例子具体了解下

    ###2.自执行函数/闭包
      >自执行函数,相信大家都接触过,只是不知道而已,在此不给出具体文字定义。

      >简单解释为:`类似(function(){...})()这种形式的代码就叫做自执行函数,又称闭包`他在js编译器解析到时,直接被执行。一个简单小例子: (function()
      >{...})()可以被自执行,写成function(){...}()可以被自执行吗,答:不可以!

      >如上面所说`规则a`,js预编译时,先解释函数声明,因此function(){...}()前面的function(){...}在‘预编译阶段’已经被解释成变量过了,js会跳过这段代码,试图去执行()里的内容,显然不科学;
      > 而(function(){...})()可以被自执行,因为它加了括号,它变成表达式了,js运行时会运行并对它求解得到一个返回值,而此处返回值是一个函数,故而遇到()便会执行

      >###例1:

        a=1;
        console.info(a)
        function b(){
          console.info(a);
          var a=10;
          console.info(a);
        };
        b();

        控制台打印:

           1,undefined,10

        你是不是预期是1,1,10,这里正是因为上面的`规则c`当js编译器在执行这个b函数的时候,会把把它body里面的声明变量提前到最前面进行声明。如:var a=10; 编译器先会在    body最前面进行var a 声明。其实上面的代码等同于下面的这段代码:

        a=1;
        console.info(a)
        function b(){
          var a;
          console.info(a);
          a=10;
          console.info(a);
        };
        b();

      声明a的时候还没有值,故而打印undefined;再看下面一个例子...

      ###例2:

        a=1;
        function b(){
          a=10;
          return ;
          function a(){};
        };
        b();
        console.info(a);

      控制台输出:1

        这里是因为上面的`规则b,d`在b函数中function a(){}实际是被编译成var a = function(){},函数内部有一个a=10,外部有一个a=1,先找内部的a,找到不会向外找,而根据js  作用域,最终打印1;

      ###3.使用场景

        有了上面的理论知识,可以解决曾经有人问我三元表达式后面怎么执行多条语句的问题,就是在后面写自执行函数。当然,不排除有其它方法,代码如下:

        var a = 2>1?(function(){var c=2,d=1;return c+d;})():(function(){var c=2,d=1;return c-d;})();
        console.info(a);

      控制台打印:3

      这种需求应该很少吧,我宁愿写个if,不过可以实现,呵呵...

  • 相关阅读:
    java学习的第三天
    java学习的第二天
    java学习的第一天
    兼容性测试2
    兼容性测试
    安全性测试
    界面测试
    功能性测试
    简历小技巧
    day13
  • 原文地址:https://www.cnblogs.com/jyjin/p/4180401.html
Copyright © 2011-2022 走看看