javascript 事件驱动机制
javascript在浏览器端和服务器端(node.js)的事件驱动机制。
1、javascript 在浏览器端的事件驱动机制
javascript 在浏览器端运行是单线程的，这是由浏览器决定的，这是为了避免多线程执行不同任务会发生冲突的情况。也就是说我们写的javascript 代码只在一个线程上运行，称之为主线程（HTML5提供了web worker API可以让浏览器开一个线程运行比较复杂耗时的 javascript任务，但是这个线程仍受主线程的控制）。
有些操作比如说获取远程数据、I/O操作等，他们都很耗时，如果采用同步的方式，那么进程在执行这些操作时就会因为耗时而等待，就像上面那样，下面的任务也只能等待，这样效率并不高。
为了解决单线程带来的阻塞问题很多操作系统实现了异步编程机制，浏览器中也是这么做的，主要表现如下：
- 只在主线程中运行 javascript 代码
- 主线程一启动就进入事件循环，整个过程就是不断的循环，不断地执行回调函数
- 遇到网络请求、I/O操作等时，浏览器会单开工作线程来处理，并设置相应的观察者，然后立即返回主线程，主线程继续执行下面的任务
- 浏览器开的线程处理好任务或者有监听的事件后会用得到的数据（或输入）形成一个事件，放在相应观察者的事件队列中，事件队列是在主线程中
- 主线程不断的循环，不断检查事件队列，通过遍历事件依次执行事件对应的回调函数
注意：下图中的消息队列是存储在主线程中
上图中，假设你发起了一个AJAX请求，无论你把这个请求写在什么地方，它始终都在回调函数里。
因为事件驱动机制就是把一切抽象为事件，代码开始执行也是一个事件，也会隐式调用回调函数，调用回调函数就是开始执行代码。然后主线程发起异步任务后就会随即返回，继续执行”代码开始事件”对应回调函数里下面的代码，等到这个回调函数执行完毕，就会执行下一个事件。在这之间，Ajax线程会完成请求，然后把请求完成的事件（包含返回的数据）发送到事件队尾中等待处理，等到主线程执行到这个事件时，指定的回调函数即被执行。
watcher机制
watcher，观察者，是事件驱动系统重要的机制。
setTimeout称为定时器，这是浏览器给的API。
每当你使用定时器，这个函数将会设置一个watcher，观察者。主线程会不断的循环，不断的”经过”这里检查时间，当主线程检查时间间隔符合要求时，就会产生一个定时器事件，加入到这个watcher事件队列中并执行回调函数。
因此执行setTimeout只是在时间到的时候产生了要调用回调函数的消息加入到了事件队列中，因此，回调函数并不一定在指定的时间时调用，它取决于前面有多少等待处理的事件。
刚才讲的是定时器观察者，还有I/O观察者、网络请求观察者、鼠标事件观察者、键盘事件观察者等等等等，我们经常遇到事件监听函数会让你绑定一个回调函数，这种监听函数一般就会设置watcher，其他线程产生的事件也会放到相应watcher的事件队列中，因此每个watcher会产生自己的事件队列。主线程在循环的时候，实际上是在依次调用这些watcher，检查每个watcher的事件队列，有事件就执行相应的回调。
它的过程就是 ：
- 进程一启动就进入事件循环
- 有监听就添加watcher
- 遍历watcher下的事件队列
- 执行下一个watcher
事件驱动机制，它会有各种各样的事件，大量的事件，它所做的一切都跟处理事件有关。但并不是所有的事件都有watcher，如果都有，主进程任务会变得非常繁重，况且有些事件我们并不关心，例如你只写了一个定时器，代表你关心这个事件，那么点击事件、网络请求事件就不用关心，因为你根本就没写啊，也就没有watcher。
2、javascript 在 node.js上的事件驱动机制
javascript 在 node.js上的事件驱动机制与浏览器端大致相同，都是单线程，都有event loop，上面讲的javascript在浏览器端的事件循环机制在node上也是大致一样的，不同的是执行者何执行者的行为不一样，因为他们关注的任务不一样：
- node端异步机制和事件循环更加纯粹一些。node为了支持高并发，所有的API几乎都是异步的，这样会充分利用操作系统的其他线程来帮忙完成任务，主线程只负责事件消费。例如当web server接收到请求，node就把它关闭，交给其他线程进行处理，然后去服务下一个web请求。当这个请求完成，它被放到处理队列，当到达队列开头，这个结果被返回给用户。这样的话webserver一直接受请求而不等待任何读写操作，这种非阻塞型I/O性能很强。
- 浏览器端是浏览器负责执行BOM API，管理线程，处理用户输入信息等，在node上是node的一个核心库libuv负责执行node API，管理主线程（运行javascript）和工作线程等。
- 因为前端和后端关注的内容不同，因此两个运行环境的API也专注于不同的任务
阻塞非阻塞与同步异步的区别
1、同步与异步
同步和异步关注的是消息通信机制 。
同步，就是在发出一个调用时，在没有得到结果之前，该调用就不返回。但是一旦调用返回，就得到返回值了。
换句话说，就是由调用者主动等待这个调用的结果。
而异步则是相反，调用在发出之后，这个调用就直接返回了，所以没有返回结果。
换句话说，当一个异步过程调用发出后，调用者不会立刻得到结果。而是在调用发出后，被调用者通过状态、通知来通知调用者，或通过回调函数处理这个调用。
2.、阻塞与非阻塞
阻塞和非阻塞关注的是程序在等待调用结果（消息，返回值）时的状态.
阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回。
非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程。
javascript 堆栈
栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）
两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。
如果存储在栈中，将会影响程序运行的性能。
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。
当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
javascript 跨域
只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。
1、如何解决跨域问题?
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
2、造成跨域的两种策略
浏览器的同源策略会导致跨域，这里同源策略又分为以下两种DOM同源策略：
（1）禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
（2）XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
3、跨域的解决方式
（1）跨域资源共享
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
对于客户端，我们还是正常使用xhr对象发送ajax请求。唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true，不然的话，cookie是带不过去的哦，设置： xhr.withCredentials = true;
对于服务器端，需要在 response header中设置如下两个字段:Access-Control-Allow-Origin: http://www.yourhost.comAccess-Control-Allow-Credentials:true这样，我们就可以跨域请求接口了。
（2）jsonp
基本原理就是通过动态创建script标签,然后利用src属性进行跨域。
（3）服务器代理
浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。
服务器代理是万能的。
（4）使用window.name进行跨域
window.name跨域同样是受到同源策略限制，父框架和子框架的src必须指向统一域名。
window.name的优势在于，name的值在不同的页面(或者不同的域名)，加载后仍然存在，除非你显示的更改。并且支持的长度达到2M.
（5）location.hash跨域
location.hash方式跨域，是子框架具有修改父框架src的hash值，通过这个属性进行传递数据，且更改hash值，页面不会刷新。
但是传递的数据的字节数是有限的。
（6）使用postMessage实现页面之间通信
信息传递除了客户端与服务器之前的传递，还存在以下几个问题：
- 页面和新开的窗口的数据交互。
- 多窗口之间的数据交互。
- 页面与所嵌套的iframe之间的信息传递。
window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了，具体可以参照MDN。
javascript 继承
JS继承的实现方式：首先得有一个父类。
// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || 'Animal';
// 实例方法
this.sleep = function(){
console.log(this.name + '正在睡觉！');
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃：' + food);
};1、原型链继承
核心： 将父类的实例作为子类的原型
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true特点：
- 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
- 父类新增原型方法/原型属性，子类都能访问到
- 简单，易于实现
缺点：
- 要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
- 无法实现多继承
- 来自原型对象的引用属性是所有实例共享的（详细请看附录代码： 示例1）
- 创建子类实例时，无法向父类构造函数传参
2、构造继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true特点：
- 解决了1中，子类实例共享父类引用属性的问题
- 创建子类实例时，可以向父类传递参数
- 可以实现多继承（call多个父类对象）
缺点：
- 实例并不是父类的实例，只是子类的实例
- 只能继承父类的实例属性和方法，不能继承原型属性/方法
- 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
3、实例继承
核心：为父类实例添加新特性，作为子类实例返回。
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false特点：
- 不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果
缺点：
- 实例是父类的实例，不是子类的实例
- 不支持多继承
4、拷贝继承
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
Cat.prototype.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true特点：
- 支持多继承
缺点：
- 效率较低，内存占用高（因为要拷贝父类的属性）
- 无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）
5、组合继承
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true特点：
- 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
- 既是子类的实例，也是父类的实例
- 不存在引用属性共享问题
- 可传参
- 函数可复用
缺点：
- 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）
6、寄生组合继承
核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Cat.prototype.constructor = Cat; // 需要修复下构造函数特点：
- 堪称完美
缺点：
- 实现较为复杂
javascript 闭包
闭包是指有权访问另一个函数作用域中变量的函数。
创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
见解：
闭包就是通过外层函数将参数传到内层函数，由内层函数计算执行，再return出外层函数。外部函数的参数值不会被垃圾回收机制回收。
闭包的特性：
- 函数内再嵌套函数
- 内部函数可以引用外层的参数和变量
- 参数和变量不会被垃圾回收机制回收