2018-10-15

JavaScript引擎的工作原理

转载自：https://www.cnblogs.com/mrxiaohe/p/5072034.html

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++写的。

2. 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的语法
定义了对表达式，语句等标准的处理算法，比如遇到==该如何处理
⋯⋯

注:js兼容性问题的原因

标准的JavaScript引擎就会根据这套文档去实现，注意这里强调了标准，因为也有不按照标准来实现的，比如IE的JS引擎。这也是为什么JavaScript会有兼容性的问题。至于为什么IE的JS引擎不按照标准来实现，就要说到浏览器大战了，这里就不赘述了，自行Google之。

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

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

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

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

2018-10-15

Node.js异步IO的流程及Event Loop

异步IO流程

Event Loop

2018-10-14

数据结构和内存中堆和栈的区别和联系

部分转载自：https://www.cnblogs.com/ChenZhongzhou/p/5685537.html

一、数据结构中的堆与栈：

栈：是一种连续储存的数据结构，具有先进后出的性质。通常的操作有入栈（圧栈）、出栈和栈顶元素。想要读取栈中的某个元素，就要将其之前的所有元素出栈才能完成。类比现实中的箱子一样。

堆：是一种非连续的树形储存数据结构，每个节点有一个值，整棵树是经过排序的。特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆。常用来实现优先队列，存取随意。

二、内存中的栈区与堆区：

一般说到内存，指的是计算机的随机储存器（RAM），程序都在这里面运行。计算机内存的大致划分如下图所示：

栈内存：由程序自动向操作系统申请分配以及回收，速度快，使用方便，但程序员无法控制。若分配失败，则提示栈溢出错误。注意，const局部变量也储存在栈区内，栈区向地址减小的方向增长。

//测试栈内存
#include <iostream>
int main()
{
    int i = 10; //变量i储存在栈区中
    const int i2 = 20;
    int i3 = 30;
    std::cout << &i << " " << &i2 << " " << &i3 << std::endl;
    return 0;
}

测试输出为：

&i3 < &i2 < &i，证明地址是减小的。

堆内存：程序员向操作系统申请一块内存，当系统收到程序的申请时，会遍历一个记录空闲内存地址的链表，寻找第一个空间大于所申请空间的堆结点，然后将该结点从空闲结点链表中删除，并将该结点的空间分配给程序。分配的速度较慢，地址不连续，容易碎片化。此外，由程序员申请，同时也必须由程序员负责销毁，否则则导致内存泄露。

//测试堆内存和栈内存的区别
#include <iostream>
int main()
{
    int i = 10; //变量i储存在栈区中
    char pc[] = "hello!"; //储存在栈区
    const double cd = 99.2; //储存在栈区
    static long si = 99; //si储存在可读写区，专门用来储存全局变量和静态变量的内存
    int* pi = new int(100); //指针pi指向的内存是在 堆区，专门储存程序运行时分配的内存
    std::cout << &i << " " << &pc << " " << &cd << " " << &si << " " << pi << std::endl;
    delete pi; //需程序员自己释放
    return 0;
}

测试输出为：

运行多次后会发现pi所指向的地址并不连续，是跳跃式的；而&si是一致的，储存在可读写区；前三个变量都储存在栈区，由程序自动分配和销毁。

栈内存和堆内存的总结：例如我们定义了一个 char a ；系统会自动的在栈上为其开辟空间。而堆（英文名字:heap）则是程序员根据需要自己申请的空间，例如malloc(10); 开辟是个字节的空间。由于栈上的空间是自动分配自动回收的，所以栈上的数据的生存周期只是在函数的运行过程中，运行后就释放掉，不可以再访问。而堆上的数据只要程序员不释放空间，就一直可以访问到，不过缺点是一旦忘记释放会造成内存泄露。

阅读全文 >>

2018-10-11

观察者模式与发布-订阅模式

转载自：https://www.cnblogs.com/lovesong/p/5272752.html

在翻阅资料的时候，有人把观察者（Observer）模式等同于发布（Publish）/订阅（Subscribe）模式，也有人认为这两种模式还是存在差异，具体的差异为调度的地方不同。

观察者模式

比较概念的解释是，目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。

比如有个“天气中心”的具体目标A，专门监听天气变化，而有个显示天气的界面的观察者B，B就把自己注册到A里，当A触发天气变化，就调度B的更新方法，并带上自己的上下文。

发布/订阅模式

比较概念的解释是，订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。

比如有个界面是实时显示天气，它就订阅天气事件（注册到调度中心，包括处理程序），当天气变化时（定时获取数据），就作为发布者发布天气信息到调度中心，调度中心就调度订阅者的天气处理程序。

总结

从两张图片可以看到，最大的区别是调度的地方。

虽然两种模式都存在订阅者和发布者（具体观察者可认为是订阅者、具体目标可认为是发布者），但是观察者模式是由具体目标调度的，而发布/订阅模式是统一由调度中心调的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布/订阅模式则不会。

两种模式都可以用于松散耦合，改进代码管理和潜在的复用。

阅读全文 >>

2018-10-09

javascript链式调用

转载自：https://www.cnblogs.com/youxin/p/3410185.html

方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。

一、方法体内返回对象实例自身(this)

function ClassA(){
    this.prop1 = null;
    this.prop2 = null;
    this.prop3 = null;
}
ClassA.prototype = {
    method1 : function(p1){
        this.prop1 = p1;
        return this;
    },
    method2 : function(p2){
        this.prop2 = p2;
        return this;
    },
    method3 : function(p3){
        this.prop3 = p3;
        return this;
    }
}

定义了function/类ClassA。有三个属性/字段prop1,prop2,prop3，三个方法methed1,method2,method3分别设置prop1,prop2,prop3。

链式调用如下：

1 2	var obj = new ClassA(); obj.method1(1).method2(2).method3(3); // obj -> prop1=1,prop2=2,prop3=3

可以看到对obj进行了连续三次操作，只要愿意ClassA的N多方法都这样定义，调用链会一直延续。

该方式缺点是链方法唯一地绑定于一种对象类型(ClaaaA)，按这种方式实现链式操作，每定义一个类，其方法体中都要返回this。第二种方式可以解决这个问题。

阅读全文 >>