概述
zone是异步任务中持续存在的执行上下文
zone.js提供了一种机制来拦截异步任务以及追踪异步任务
zone.js的代码库使用monkey patch的方式，在运行时动态地给浏览器的异步api进行一层包装，并让其在zone的上下文执行。通过指定拦截规则，能够让我们对异步操作的调用和调度进行拦截，还可以在异步任务之前或之后添加代码。一个系统中能够存在多个zone实例，但是任意时刻只能有一个处于激活状态，通过Zone.current可以获取当前激活的zone实例。
zone.js所做的事情有如下几点：
1.拦截异步任务的调度
2.在异步操作中封装回调函数，以此来进行错误处理和zone追踪
3.提供一种方法添加数据到zones中去
4.提供最后一帧的错误处理的具体上下文
5.拦截阻塞的方法(alert/confirm/prompt/sync ajax)
一、封装回调函数
zones需要在异步操作中持续存在，所以每次的异步任务建立时都需要捕获当前的zone并将其封装到回调函数中，在执行异步任务时，将当前的Zone.current恢复为之前捕获的zone。所以如果一个异步操作链是一个执行线程，那么Zone.current将充当为线程的局部变量。
二、异步操作的调度
存在三种可以调度的异步任务
1.MicroTask：在当前task结束之后和下一个task开始之前执行的，不可取消，如Promise，MutationObserver、process.nextTick
2.MacroTask：一段时间后才执行的task，可以取消，如setTimeout, setInterval, setImmediate, I/O, UI rendering
3.EventTask：监听未来的事件，可能执行0次或多次，执行时间是不确定的
zone.js对上述的api都进行了monkey patch，对这些api都进行了重谢并替换了全局对象中的默认方法
三、可组合性
zones之间可以同过Zone.fork()组合在一起，一个子zone可以创建自己规则，可以：
1.将拦截委派给父zone，有选择地在封装回调之前或之后添加钩子，
2.或者不用代理处理请求
组合性允许zones之间彼此互补干扰，比如顶层的zone可以选择捕获错误，子zone可以选择追踪用户的行为
四、根zone
浏览器在开始运行时会创建一个特殊的根zone，其余所有的zone都是根zone的子zone
五、分析
官方例子：profiling.html 计算异步任务的耗时
...
Profiling with Zones
Zone.current.fork(profilingZoneSpec).run(main)是这份代码最重要的一句，为了弄懂这句话究竟做了什么，先来看下zone.js的源码实现
Class Zone：
...
private _zoneDelegate: ZoneDelegate;
static get current(): AmbientZone {
return _currentZoneFrame.zone;
}
public fork(zoneSpec: ZoneSpec): AmbientZone {
if (!zoneSpec) throw new Error('ZoneSpec required!');
return this._zoneDelegate.fork(this, zoneSpec);
}
public run(callback: (...args: any[]) => T, applyThis: any = undefined, applyArgs: any[] = null
,source: string = null): T {
_currentZoneFrame = {parent: _currentZoneFrame, zone: this};
try {
return this._zoneDelegate.invoke(this, callback, applyThis, applyArgs, source);
} finally {
_currentZoneFrame = _currentZoneFrame.parent;
}
}
...
Class ZoneDelegate:
...
fork(targetZone: Zone, zoneSpec: ZoneSpec): AmbientZone {
return this._forkZS ? this._forkZS.onFork(this._forkDlgt, this.zone, targetZone, zoneSpec) :
new Zone(targetZone, zoneSpec);
}
invoke(targetZone: Zone, callback: Function, applyThis: any, applyArgs: any[], source: string):
any {
return this._invokeZS ?
this._invokeZS.onInvoke(
this._invokeDlgt, this._invokeCurrZone, targetZone, callback, applyThis, applyArgs,
source) :
callback.apply(applyThis, applyArgs);
}
...
如代码所示，current方法是Zone类的一个静态方法，返回_currentZoneFrame.zone，_currentZoneFrame是一个全局对象，保存了当前系统中的zone帧链，它有两个属性，parent指向了父zoneFrame，zone指向了当前激活的zone对象。所以_currentZoneFrame并不是固定不变的。
let _currentZoneFrame: _ZoneFrame = {parent: null, zone: new Zone(null, null)};
系统初始化时，实例化zone时，需往构造函数传入一个父zone对象和一个zone规则对象，当zone规则对象为null时，构造函数将认为该zone是根zone。这也说明了为什么浏览器在开始运行时会创建一个特殊的根zone，因为在声明_currentZoneFrame时就创建了根zone。
所以 Zone.current.fork(profilingZoneSpec).run(main) 的意思就是，使用根zone创建新的未命名的子zone，然后让子zone去运行main()
public fork(zoneSpec: ZoneSpec): AmbientZone {
if (!zoneSpec) throw new Error('ZoneSpec required!');
return this._zoneDelegate.fork(this, zoneSpec); //体交由zone的代理对象来实现
}
从上面代码中可以知道，zone实例的fork方法中会交代给代理去创建新的子zone。因为zone.js允许我们在新建子zone前添加hook，代理对象的fork方法会判断是否有onFork的hook，若有则先执行onFork，如下所示
fork(targetZone: Zone, zoneSpec: ZoneSpec): AmbientZone {
return this._forkZS ? //fork规则是否存在
this._forkZS.onFork(this._forkDlgt, this.zone, targetZone, zoneSpec) :
new Zone(targetZone, zoneSpec);
}
当发现规则中有onFork的要求时，则先执行该hook。除此onFork之外，在拦截规则中我们同样可以设置onInvoke、onHandleError、onInvokeTask、onCancelTask等hook，原理同上，zone都会将其交由代理来处理。例如onInvoke，拿Zone.current.fork(profilingZoneSpec).run(main)举例，run会调用Invoke方法，下面是run方法的具体实现
public run(callback: (...args: any[]) => T, applyThis: any = undefined, applyArgs: any[] = null
,source: string = null): T {
_currentZoneFrame = {parent: _currentZoneFrame, zone: this};
try {
return this._zoneDelegate.invoke(this, callback, applyThis, applyArgs, source);
} finally {
_currentZoneFrame = _currentZoneFrame.parent;
}
}
可以看到，执行run(main)之后，zone将main的调用交给了代理对象，代理对象的invoke方法实现如下
invoke(targetZone: Zone, callback: Function, applyThis: any, applyArgs: any[], source: string):
any {
return this._invokeZS ?
this._invokeZS.onInvoke(
this._invokeDlgt, this._invokeCurrZone, targetZone, callback, applyThis, applyArgs,
source) :
callback.apply(applyThis, applyArgs); //直接执行传入的回调
}
当代理对象发现规则中有onInvoke的hook时，则先执行该hook。但是在该样例中并没有设置onInvoke，所以代理对象直接执行了main。
到这里或许会很疑惑，zone执行了main就结束了吗？它是如何追踪异步任务的，答案是monkey patch，通过对异步任务的patch，在任务创建前和执行前都进行了一层封装，下面来看zone.js是如何patch setTimeout的
//browser.ts
Zone.__load_patch('timers', (global: any) => {
const set = 'set';
const clear = 'clear';
patchTimer(global, set, clear, 'Timeout');
patchTimer(global, set, clear, 'Interval');
patchTimer(global, set, clear, 'Immediate');
});
patchTimer是实现patch的主要方法，参数global是window对象，set、clear是异步任务的前缀，最后一个参数是异步任务的后缀。接着看下patchTimer的部分实现
patchTimer(window: any, setName: string, cancelName: string, nameSuffix: string) {
let setNative: Function = null; //原生的setTimeout
let clearNative: Function = null; //原生的cleanTimeout
setName += nameSuffix; //获得'setTimeout'
cancelName += nameSuffix; //获得'cleanTimeout'
//该方法会在建立异步任务时被调用，具体可看官方源码
function scheduleTask(task: Task) {
const data = task.data;
//要执行的异步任务
function timer() {
try {
task.invoke.apply(this, arguments);
} finally {...}
}
}
}
data.args[0] = timer;
//调用原生setTimeout，将data.args[0] 即callback和data.args[1]即delay作为参数
data.handleId = setNative.apply(window, data.args);
return task;
}
setNative =
patchMethod(window, setName, (delegate: Function) => function(self: any, args: any[]) {}
clearNative =
patchMethod(window, cancelName, (delegate: Function) => function(self: any, args: any[]) {}
}
patchMethod返回的是原生的setTimeout，同时patchMethod会将window.setTimeout进行patch，下面是patch后的window.setTimeout的部分代码
window.setTimeout = function() {
return patchDelegate(this, arguments as any);
}
patchDelegate(self: any, args: any[]) {
if (typeof args[0] === 'function') {
const options: TimerOptions = {
handleId: null,
isPeriodic: nameSuffix === 'Interval',
delay: (nameSuffix === 'Timeout' || nameSuffix === 'Interval') ? args[1] || 0 : null,
args: args
};
//新建异步任务对象，同时在返回task前，会调用传入的scheduleTask方法，
//scheduleTask方法会调用原生的setTimeout对象
const task =
scheduleMacroTaskWithCurrentZone(setName, args[0], options, scheduleTask, clearTask);
...
}
所以，当我们调用全局的setTimeout时，就会将传入的回调函数和延迟时间包装为一个Task对象，然后zone代理对象执行Task的scheduleTask方法，scheduleTask方法又调用了原生setTimeout方法，然后setTimeout在一段时间后执行Task的invoke方法，invoke方法里包装了真正的回调函数。
最后说说官方例子中onInvokeTask是什么时候执行的
//代理对象的invokeTask方法
invokeTask(targetZone: Zone, task: Task, applyThis: any, applyArgs: any): any {
return this._invokeTaskZS ?
this._invokeTaskZS.onInvokeTask(
this._invokeTaskDlgt, this._invokeTaskCurrZone, targetZone, task, applyThis,
applyArgs) :
task.callback.apply(applyThis, applyArgs);
}
异步任务执行时最后会经过层层传递，最后交由代理对象来执行，代理对象会先判断是否有设置onInvokeTask的hook，有则执行onInvokeTask，不执行异步任务的回调函数。
onInvokeTask: function (parentdelegate, current, target, task, applyThis, applyArgs) {
this.start = timer();
//交由父代理来执行异步任务
parentdelegate.invokeTask(target, task, applyThis, applyArgs);
time += timer() - this.start;
},
执行onInvokeTask时，会交由父代理来执行异步任务，因为可能存在父zone中也设置了onInvokeTask的情况，直到有某个父zone没有设置onInvokeTask时，才真正执行异步任务的回调函数。
参考:
Brian Ford Zone
zone.js
How the hell does zone.js really work?