今天想简单聊聊mobx的observable和autoRun函数。不了解es6的proxy和reflect的伙伴，需要先看看这方面的知识点。
1、observable
observable的作用是使一个普通的对象，变得可观察。也就是说当一个对象变得可观察了之后，当你改变对象里的一个值的时候，就会去触发对应的有这个引用的autoRun函数。
下面来看看observable的简单实现，这里不考虑对象的嵌套。就假设它只有一层。方便理解概念。
var globalID = 0
function observable(obj) {
var oID = ++globalID
return new Proxy(obj, {
get: function (target, key, receiver) {
collect.startCollect(oID + '' +key)
return Reflect.get(target, key, receiver)
},
set: function (target, key, value, receiver) {
Reflect.set(target, key, value, receiver)
collection[oID + '' + key] && collection[oID + '' + key].forEach(c => {
c()
});
}
})
}observable的解释在此：引用阮一峰的es6教程里的话
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
这里用Proxy是因为当你在可观察对象上加入新的属性时，就不会像Object.defineProperty那样新的属性没法监听了。
像上面代码那样，咱们就成功的拦截了一个对象的getter和setter了。
每次当你obj.a或者obj.b的时候都会进入get方法。咱们在返回obj.a，之前都会去收集依赖。至于到底要不要收集依赖，我这里是由collect.startCollect去判断的。
每当你obj.a = 'balabala'的时候，咱们也拦截了set方法。在写入值的之后，就要搞事情了，偷偷地去把收集来的依赖相应的依赖，给全部执行一遍（如果确实有的话）。
2、autoRun
一旦任何值发生了修改，就去执行传入autoRun的方法。
function autorun(handler) {
collect.begin(handler)
handler()
collect.end()
}有点简单粗暴，是不是。开始收集依赖了，我先发个信号。然后把autoRun里的handler给执行一遍。最后，打声招呼：小朋友你已经兑过奖了，回家吧。执行collect.end()。
3、collect
看了上面两个，心里在想那个collect到底是个什么鬼？
var collection = {}
var collect = {
begin: function(handler) {
collection.handler = handler
collection.now = true
},
startCollect: function(oIDKey) {
if (collection.now) {
if (collection[oIDKey]) {
collection[oIDKey].push(collection.handler)
} else {
collection[oIDKey] = [collection.handler]
}
}
},
end: function() {
collection.now = false
}
}这里的collection我也就写在全局了，简单粗暴。
在autoRun里，我们先begin，我把handler赋给了collection.handler，嗯简单粗暴。并且把collection.now设为true，表示需要收集依赖了。
然后执行handler()，就会到get里去执行collect.startCollect。
当startCollect的时候，开始干正经活了，先判断一下是不是now。前面我们劫持了getter，如果不判断collection.now，那么collect.startCollect(oID + '' +key)总是会执行。那就出大事情了。之后，咱们就可以放心的去收集handler了。
完事之后吧collection.now设为false。要不然你每每obj.a取值的时候都会反复的收集依赖。
好了，我想mobx的思路大概是这样的。这是我的理解，有心的同学帮我纠纠错，蟹蟹~
最后放上完整的本人的(cuo)dai照ma。
var globalID = 0
function observable(obj) {
var oID = ++globalID
return new Proxy(obj, {
get: function (target, key, receiver) {
collect.startCollect(oID + '' +key)
return Reflect.get(target, key, receiver)
},
set: function (target, key, value, receiver) {
Reflect.set(target, key, value, receiver)
collection[oID + '' + key] && collection[oID + '' + key].forEach(c => {
c()
});
}
})
}
var collection = {}
var collect = {
begin: function(handler) {
collection.handler = handler
collection.now = true
},
startCollect: function(oIDKey) {
if (collection.now) {
if (collection[oIDKey]) {
collection[oIDKey].push(collection.handler)
} else {
collection[oIDKey] = [collection.handler]
}
}
},
end: function() {
collection.now = false
}
}
function autorun(handler) {
collect.begin(handler)
handler()
collect.end()
}
var obj = observable({
a: 1,
b: 2
})
autorun(() => {
console.log('obj.a test1', obj.a)
})
autorun(() => {
console.log('obj.a test2', obj.a)
})