摘要：此時(shí)為空對(duì)象當(dāng)構(gòu)造函數(shù)原型對(duì)象上存在屬性，則執(zhí)行下面代碼。屬性名傳遞進(jìn)來(lái)的函數(shù)描述符構(gòu)造函數(shù)原型對(duì)象此時(shí)為最后通過(guò)調(diào)用函數(shù)為屬性生成描述符。初始值獲取之后，調(diào)用方法，傳入構(gòu)造函數(shù)原型對(duì)象屬性名初始值和。

observable 同時(shí)支持 decorator 方式和方法調(diào)用方式。

// 示例
@observable name = "張三";
const temp = observable.box(20);

在源碼中可以發(fā)現(xiàn) mobx 為 observable 上綁定了很多方法。

Object.keys(observableFactories).forEach(function(name) {
    return (observable[name] = observableFactories[name]);
});

本篇文章重點(diǎn)介紹 @observable 調(diào)用，其余的后續(xù)文章會(huì)繼續(xù)講解。

@observable 有一個(gè)很強(qiáng)大的功能，它會(huì)對(duì)于不同類(lèi)型，應(yīng)用不同的轉(zhuǎn)換規(guī)則。它究竟是如何處理的？

當(dāng)我們使用 @observable，實(shí)質(zhì)上是調(diào)用了 createObservable 的返回的 deepDecorator 函數(shù)。

createObservable 接收 3 個(gè)參數(shù) v、arg2、arg3，這三個(gè)參數(shù)分別對(duì)應(yīng)構(gòu)造函數(shù)的原型對(duì)象、屬性名、描述符。

function createObservable(v, arg2, arg3) {
    // @observable someProp;
    if (typeof arguments[1] === "string") {
        return deepDecorator.apply(null, arguments);
    }
    ...
}

deepDecorator 函數(shù)是 createDecoratorForEnhancer 的返回值，它把 deepEnhancer 作為參數(shù)傳遞進(jìn)去。deepDecorator 的具體功能就是針對(duì)不同類(lèi)型使用不同方式的 observable。

var deepDecorator = createDecoratorForEnhancer(deepEnhancer);

createDecoratorForEnhancer 函數(shù)會(huì)返回一個(gè) res，所以說(shuō)當(dāng)調(diào)用 @observable 時(shí)候就是等于執(zhí)行 res 函數(shù)，傳遞進(jìn)去的 deepEnhancer 會(huì)作為 res 的 enhancer 屬性存在。

createDecoratorForEnhancer 方法內(nèi)部會(huì)通過(guò) createPropDecorator 函數(shù)生成 res。createPropDecorator 函數(shù)接收 2 個(gè)參數(shù)，第一個(gè)參數(shù) propertyInitiallyEnumerable 設(shè)置為 true ( 內(nèi)部寫(xiě)死 )，第二個(gè)參數(shù) propertyCreator 為傳遞進(jìn)來(lái)的函數(shù)。

createPropDecorator 函數(shù)返回 decoratorFactory 函數(shù)。看到這里，我們先整理下，當(dāng)我們編寫(xiě) @observable，實(shí)質(zhì)上就是在調(diào)用 decoratorFactory 函數(shù)。

decoratorFactory 函數(shù)內(nèi)部定義 decorator 函數(shù)，當(dāng)調(diào)用時(shí)，會(huì)先判斷當(dāng)前的調(diào)用方式，如果是 @decorator 方式調(diào)用，則直接執(zhí)行 decorator 函數(shù)，否則返回 decorator 函數(shù)。

decorator 函數(shù)內(nèi)部會(huì)首先判斷構(gòu)造函數(shù)的原型對(duì)象上是否存在 __mobxDecorators 屬性，如果不存在，則定義此屬性，并通過(guò) addHiddenProp 方法設(shè)置描述符。

function addHiddenProp(object, propName, value) {
    Object.defineProperty(object, propName, {
        enumerable: false,
        writable: true,
        configurable: true,
        value: value // 此時(shí)為空對(duì)象
    });
}

當(dāng)構(gòu)造函數(shù)原型對(duì)象上存在 __mobxDecorators 屬性，則執(zhí)行下面代碼。

target.__mobxDecorators[prop] = {
    prop: prop, // 屬性名
    propertyCreator: propertyCreator, // 傳遞進(jìn)來(lái)的函數(shù)
    descriptor: descriptor, // 描述符
    decoratorTarget: target, // 構(gòu)造函數(shù)原型對(duì)象
    decoratorArguments: decoratorArguments // 此時(shí)為 []
};

最后通過(guò)調(diào)用 createPropertyInitializerDescriptor 函數(shù)為屬性生成描述符。createPropertyInitializerDescriptor 函數(shù)內(nèi)部會(huì)根據(jù)是否可枚舉進(jìn)行分類(lèi)，并以屬性名作為緩存對(duì)象的 key，生成的描述符作為 value 存在。

尤其需要注意的是，描述符中有 get 和 set 方法，這兩個(gè)方法內(nèi)部都會(huì)首先調(diào)用 initializeInstance 方法，然后才執(zhí)行對(duì)應(yīng)的數(shù)據(jù)操作。

initializeInstance 方法會(huì)首先判斷原型對(duì)象是否 __mobxDidRunLazyInitializers 屬性，如果存在，則后續(xù)都不執(zhí)行。如果不存在，則會(huì)依次調(diào)用原型對(duì)象上 __mobxDecorators 屬性對(duì)應(yīng)的 propertyCreator 方法。

看到這里，可能有人就懵了，問(wèn) propertyCreator 方法哪來(lái)的？還記得我們?cè)谡{(diào)用 createPropDecorator 函數(shù)傳遞進(jìn)去的第二個(gè)參數(shù)嗎？這個(gè)方法就是那來(lái)的。propertyCreator 內(nèi)部首先會(huì)判斷屬性描述符中是否存在 get，這里的屬性描述符是原有的屬性描述符，而不是封裝后的。如果存在 get 方法，則報(bào)錯(cuò)，否則繼續(xù)執(zhí)行。判斷描述符是否存在，不存在則設(shè)置初始值為 undefined，存在則繼續(xù)判斷是否有 initializer 方法，如果沒(méi)有，則初始值為描述符的 value。如果有此方法，否則執(zhí)行此方法，獲取屬性初始值。

var initialValue = descriptor
    ? descriptor.initializer
        ? descriptor.initializer.call(target)
        : descriptor.value
    : undefined;

初始值獲取之后，調(diào)用 defineObservableProperty 方法，傳入 target 構(gòu)造函數(shù)原型對(duì)象、propertyName 屬性名、initialValue 初始值和 enhancer ( deepEnhancer )。

function defineObservableProperty(target, propName, newValue, enhancer) {
    var adm = asObservableObject(target);
}

asObservableObject 方法會(huì)首先判斷原型對(duì)象是否可擴(kuò)展，如果不可以，則報(bào)錯(cuò)。其次根據(jù)一定規(guī)則生成 name，通過(guò)調(diào)用 new ObservableObjectAdministration(target, name, defaultEnhancer) 生成 adm 對(duì)象，此對(duì)象會(huì)綁在原型對(duì)象的 $mobx 上，并返回新生成的 adm 對(duì)象。

defineObservableProperty 首先會(huì)通過(guò)調(diào)用 asObservableObject 方法獲取 adm 對(duì)象，判斷原型對(duì)象上的屬性是否可配置與可寫(xiě)，如果不可以，報(bào)錯(cuò)。判斷新生成的 adm 對(duì)象上是否存在 interceptors 屬性，且屬性值得長(zhǎng)度大于 0。

如果不存在，則給 adm 對(duì)象的 values 屬性賦值，值為 ObservableValue 的實(shí)例。

ObservableValue 類(lèi)繼承 Atom 類(lèi)，在實(shí)例化 ObservableValue 同時(shí)，會(huì)執(zhí)行 enhancer 方法，在這里即為 deepEnhancer。

var ObservableValue = (function(_super) {
    __extends(ObservableValue, _super);
    // 部分代碼
    var _this = _super.call(this, name) || this;
    _this.value = enhancer(value, undefined, name);
})(Atom);

deepEnhancer 會(huì)對(duì)原型對(duì)象進(jìn)行判斷，如果是 observable，直接返回原型對(duì)象；如果是數(shù)組，返回 observable.array 調(diào)用后結(jié)果；如果是對(duì)象，返回 observable.object 調(diào)用后結(jié)果；如果是 Map，返回 observable.map 調(diào)用后結(jié)果；如果是 Set，返回 observable.set 調(diào)用后結(jié)果；如果都不是，則直接返回傳進(jìn)來(lái)的 v。

function deepEnhancer(v, _, name) {
    if (isObservable(v)) return v;
    if (Array.isArray(v)) return observable.array(v, { name: name });
    if (isPlainObject(v)) return observable.object(v, undefined, { name: name });
    if (isES6Map(v)) return observable.map(v, { name: name });
    if (isES6Set(v)) return observable.set(v, { name: name });
    return v;
}

defineObservableProperty 方法最后會(huì)覆蓋原型對(duì)象原有的屬性描述符，并劫持 get 和 set 操作。

Object.defineProperty(target, propName, generateComputedPropConfig(propName));

function generateComputedPropConfig(){
    // 部分
    return {
        configurable: true,
        enumerable: true,
        get: function() {
            return this.$mobx.read(this, propName);
        },
        set: function(v) {
            this.$mobx.write(this, propName, v);
        }
    }
}

如果覺(jué)得文章不錯(cuò)，對(duì)你有幫助，煩請(qǐng)點(diǎn)贊。