js引擎总结笔记

浅浅的花香味﹌ 2022-07-16 10:43 122阅读 0赞

## 先看几段代码再看js引擎吧 ##

每个写过程序的人都不会对作用域这个概念陌生，那在这篇文章中就来谈下Javascript的作用域。
    　　在Javascript，全局环境本身就一个对象。在浏览器宿主中这个对象是window，而当Javascript用于其它非浏览器的宿主，如嵌入式的环境中，可能会是其它的对象。
    　　在这里也纠正一个观念，有很多人都认为Javascript只在浏览器中使用，其实Javascript也能在很多非Web情况下使用，据介绍Javascript在一些基于嵌入式的应用领域表现得也很出色，当然这些我也只是听过传说而已。
    　　言归正传，当我们写下：
          var i=1时，其实就是声明了一个window作用域的一个变量。
    　　而当我们写下i=1时，是声明了一个window的属性。
    　　看这样一段代码：
        <script type="text/javascript">
            var a = "hello";  
              b = "world";  
            Test();
            function Test() { 
                alert(a + " " + b);
                var a = "welcome";
                b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        script>
    
    　　这段代码分别输出的结果是：undefined world，welcome china, hello china.
    　　我们来分别解释：
    　　在上文中，我们说过，在Javascript预编译时，会把所有var变量创建，默认值为undefined，我们在这里可以举一个例子：
    　　我们可以写这样一段代码：
        <script type="text/javascript"    
            var a = "111";
            b = "111";
             alert(a);
            alert(b);
        script>
    
    　　当我们执行运行这段脚本时，可以发现，首先弹出undefined，然后回提示脚本错误，提示b不存在。由此就可以表明，a在预编译的过程中就已经被创建并且初始化为undefined，而b却只能在实际运行时按顺序去解释。其实在预编译后的Javascript代码可以近乎理解如下：
        <script type="text/javascript">
            var a = undefined;
            alert(a);
            alert(b);
            a = "111";
            b = "111";
       </ script>
    
    
    　　接下来我们可以谈一下函数的作用域问题，每当代码运行进入一个函数时，Javascript引擎就会自动创建一个新的作用域，然后把这个新作用域作为当前作用域的子作用域，然后换到这个把当前的代码作用域切新作用域。当代码退出函数时，这个作用域销毁，把代码作用域交还给他的父作用域。
    　　好，准备工作差不多了，接下来我们就来解释第一个问题：问什么会输出undefined world。
    　　首先代码进行预编译，当进入 Test方法时，开启一个新作用域，然后把全局作用域作为他的父作用域。然后对Test内的方法进行预编译，和上面的代码一样，Test方法被预编译后方法体大致如下：
    function Test() { 
        var a = undefined;
        alert(a + " " + b);
        var a = "welcome";
        b = "china";
        alert(a + " " + b);
    }
    　　当然，在当前作用域下无法找到b，于是他就会到他的父作用域下，也就是全局作用域找到了b=“world”。于是也就产生了这样的结果。
    　　第二次弹出welcome china，没什么好说的。
    　　第三次，弹出hello china。我们可以这样理解，var a 只是 方法Test的一个局部变量，而b由于事先未声明，因此他会去父作用域中去找到对应的定义。
    　　好，接下来，我们再看一下这个方法的若干个变体。
        <script type="text/javascript">
            var a = "hello";
            b = "world";
            Test();
            function Test() { 
                alert(a + " " + b);
                a = "welcome";
                b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        script>
    
    　　首先，我们将方法体内的var a改成a，我们先不看答案，直接来分析，首先，在预编译阶段，方法体内几乎没有任何改变，因此此时a和b一样，都要去他们的父作用域中去寻找，因此第一次出的结果应该是hello world，第二次没什么说的：welcome china，第三次由于a和b在本作用域内都没有事先定义，因此都是再改变父作用域内的值，因此应该输出welcome china.
    　　我们继续：
        <script type="text/javascript">
            var a = "hello";
            b = "world";
            Test();
            function Test() { 
                alert(a + " " + b);
                var a = "welcome";
                var b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        script>
    
    　　和上面的分析一样，应该输出undefined undefined，welcome china，hello world.
    　　继续：
        <script type="text/javascript">
            a = "hello";
            b = "world";
            Test();
            function Test() { 
                alert(a + " " + b);
                var a = "welcome";
                b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        script>
    
    　　应该是undefined world,welcome china,hello china.
    　　经试验，都没问题， 不知道你明白了么？
    　　因此我们可以得出，每个变量在找不到自己的定义时，都会沿着作用链向上寻找，这样就很可能会出现未预知的错误，给排错添加了很多困难。更麻烦的是，还可能会对父作用域上的变量值进行修改，因此我们在声明变量时应该尽量加上var，尽管Javascript并不强迫我们这样做。

1.  什么是JavaScript解析引擎？

简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。

学过编译原理的人都知道，对于静态语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的动态语言则叫解释器（Interpreter）。这两者的区别用一句话来概括就是：编译器是将源代码编译为另外一种代码（比如机器码，或者字节码），而解释器是直接解析并将代码运行结果输出。 比方说，firebug的console就是一个JavaScript的解释器。  
但是，现在很难去界定说，JavaScript引擎它到底算是个解释器还是个编译器，因为，比如像V8（Chrome的JS引擎），它其实为了提高JS的运行性能，在运行之前会先将JS编译为本地的机器码（native machine code），然后再去执行机器码（这样速度就快很多），相信大家对JIT（Just In Time Compilation）一定不陌生吧。

我个人认为，不需要过分去强调JavaScript解析引擎到底是什么，了解它究竟做了什么事情我个人认为就可以了。对于编译器或者解释器究竟是如何看懂代码的，翻出大学编译课的教材就可以了。

这里还要强调的就是，JavaScript引擎本身也是程序，代码编写而成。比如V8就是用C/C++写的。

1.  JavaScript解析引擎与ECMAScript是什么关系？

JavaScript引擎是一段程序，我们写的JavaScript代码也是程序，如何让程序去读懂程序呢？这就需要定义规则。比如，之前提到的var a = 1 + 1;，它表示：

左边var代表了这是申明（declaration），它申明了a这个变量  
右边的+表示要将1和1做加法  
中间的等号表示了这是个赋值语句  
最后的分号表示这句语句结束了  
上述这些就是规则，有了它就等于有了衡量的标准，JavaScript引擎就可以根据这个标准去解析JavaScript代码了。那么这里的ECMAScript就是定义了这些规则。其中ECMAScript 262这份文档，就是对JavaScript这门语言定义了一整套完整的标准。其中包括：

var，if，else，break，continue等是JavaScript的关键词  
abstract，int，long等是JavaScript保留词  
怎么样算是数字、怎么样算是字符串等等  
定义了操作符（+，-，>，<等）  
定义了JavaScript的语法  
定义了对表达式，语句等标准的处理算法，比如遇到==该如何处理  
⋯⋯  
标准的JavaScript引擎就会根据这套文档去实现，注意这里强调了标准，因为也有不按照标准来实现的，比如IE的JS引擎。这也是为什么JavaScript会有兼容性的问题。至于为什么IE的JS引擎不按照标准来实现，就要说到浏览器大战了，这里就不赘述了，自行Google之。

所以，简单的说，ECMAScript定义了语言的标准，JavaScript引擎根据它来实现，这就是两者的关系。

1.  JavaScript解析引擎与浏览器又是什么关系？

简单地说，JavaScript引擎是浏览器的组成部分之一。因为浏览器还要做很多别的事情，比如解析页面、渲染页面、Cookie管理、历史记录等等。那么，既然是组成部分，因此一般情况下JavaScript引擎都是浏览器开发商自行开发的。比如：IE9的Chakra、Firefox的TraceMonkey、Chrome的V8等等。

从而也看出，不同浏览器都采用了不同的JavaScript引擎。因此，我们只能说要深入了解哪个JavaScript引擎。

1.  深入了解其内部原理的途径有哪些？

搞清楚了前面三个问题，那这个问题就好回答了。个人认为，主要途径有如下几种（依次由浅入深）：

看讲JavaScript引擎工作原理的书  
这种方式最方便，不过我个人了解到的这样的书几乎没有，但是Dmitry A.Soshnikov博客上的文章真的是非常的赞，建议直接看英文，实在英文看起来吃力的，可以看译本  
看ECMAScript的标准文档  
这种方式相对直接，原汁原味，因为引擎就是根据标准来实现的。目前来说，可以看第五版和第三版，不过要看懂也是不容易的。  
看JS引擎源代码  
这种方式最直接，当然也最难了。因为还牵涉到了如何实现词法分析器，语法分析器等等更加底层的东西了，而且并非所有的引擎代码都是开源的。  
5. 以上几种方式中第一种都很难看明白怎么办？

其实第一种方式中的文章，作者已经将文档中内容提炼出来，用通俗易懂的方式阐述出来了。如果，看起来还觉得吃力，那说明还缺少两块的东西：

对JavaScript本身还理解的不够深入  
如果你刚刚接触JavaScript，或者说以前甚至都没有接触过。那一下子就想要去理解内部工作原理，的确是很吃力的。首先应该多看看书，多实践实践，从知识和实践的方式来了解JavaScript预言特性。这种情况下，你只需要了解现象。比方说，(function()\{\})() 这样可以直接调用该匿名函数、用闭包可以解决循环中的延迟操作的变量值获取问题等等。要了解这些，都是需要多汲取和实践的。实践这里就不多说了，而知识汲取方面可以多看看书和博客。这个层面的书就相对比较多了，《Professional JavaScript for Web Developers》就是本很好的书（中文版请自行寻找）。  
缺乏相应的领域知识  
当JavaScript也达到一定深度了，但是，还是看不大明白，或者没法很深入到内部去一探究竟。那就意味着缺少对应的领域知识。这里明显的就是编译原理相关的知识。不过，其实对这块了解个大概基本看起来就没问题了。要再继续深入，那需要对编译原理了解的很深入，比如说词法分析采用什么算法，一般怎么处理。会有什么问题，如何解决，AST生成算法一般有哪几种等等。那要看编译原理方面的书，也有基本经典的书，比如《Compilers: Principles, Techniques, and Tools》这本也是传说中的龙书，还有非常著名的《SICP》和《PLAI》。不过其实根据个人经验，对于Dmitry的文章，要看懂它，只要你对JavaScript有一定深度的了解，同时你大学计算机的课程都能大致掌握了（尤其是操作系统），也就是说基础不错，理解起来应该没问题。因为这些文章基本没有涉及底层编译相关的，只是在解释文档的内容，并且其中很多东西都是相通的，比如：context的切换与CPU的进程切换、函数相关的的局部变量的栈存储、函数退出的操作等等都是一致的。

读到这里感觉到大学里学到的东西其实还是非常有用的,当初自己是干嘛去啦,操作系统,编译原理,数据结构哎真希望脑补一下再!!!!!!!