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，不过可以实现，呵呵...