dxmz / mobx-chinese-interpretation Goto Github PK

（1）observable收集观察者
reaction = new Reaction() --> reaction.track() --> trackDerivedFunction() --> bindDependencies(derivation) --> addObserver(observable, derivation) --> observable.observers.add(node)  

（2）观察者收集observable
observableValue.get() --> this.reportObserved(observable) --> derivation.newObserving![derivation.unboundDepsCount++] = observable

（3）observable变更时触发derivation执行
observableValue.set() --> this.reportChanged(observable) -->  propagateChanged(this) --> observable.observers.forEach((d) => {d.onBecomeStale()}) --> d.schedule() --> globalState.pendingReactions.push(d) 以及 runReactions() --> reactionScheduler(runReactionsHelper) --> 遍历执行相关联的衍生（derivation.runReaction()） --> this.onInvalidate()即用户定义的逻辑

// 删减后的代码
track(fn: () => void) {
        startBatch()
  
        const result = trackDerivedFunction(this, fn, undefined)
     
        if (this.isDisposed) {
            // disposed during last run. Clean up everything that was bound after the dispose call.
            clearObserving(this)
        }
        
        endBatch()
    }

function trackDerivedFunction<T>(derivation: IDerivation, f: () => T, context: any) {
    const prevAllowStateReads = allowStateReadsStart(true)
    // pre allocate array allocation + room for variation in deps
    // array will be trimmed by bindDependencies
    // 把 derivation.dependenciesState 和 derivation.observing数组内所有 ob.lowestObserverState 改为    IDerivationState.UP_TO_DATE （0）
    // 先调用 changeDependenciesStateTo0 方法将 derivation 和 observing 置为稳定态 UP_TO_DATE，主要是方便后续判断是否处在收集依赖阶段
    changeDependenciesStateTo0(derivation)
    // 提前为新 observing 申请空间，之后会trim
    derivation.newObserving = new Array(derivation.observing.length + 100)
    // unboundDepsCount记录尚未绑定的数量，observable被观察者观察时通过reportObserved()更新值
    derivation.unboundDepsCount = 0
    derivation.runId = ++globalState.runId
    // 保存Reaction上下文，将当前进行的reaction赋值给globalState.trackingDerivation供bindDependencies依赖收集用
    const prevTracking = globalState.trackingDerivation
    globalState.trackingDerivation = derivation
    let result
    if (globalState.disableErrorBoundaries === true) {
        result = f.call(context)
    } else {
        try {
            // 这一步将会触发 observable 的访问(因为f中会访问可观察对象的属性)，
            // 即我们 ob.name --> $mobx.name.get() (ObservableValue.prototype.get)
            // -->reportObserved(ObservableValue)
            
            //调用track参数中的函数,在mobx-react里就是组件的render方法
            result = f.call(context)
        } catch (e) {
            result = new CaughtException(e)
        }
    }
    //恢复Reaction上下文
    globalState.trackingDerivation = prevTracking
    //Reaction跟Observable建立关系
    bindDependencies(derivation)

    warnAboutDerivationWithoutDependencies(derivation)

    allowStateReadsEnd(prevAllowStateReads)

    return result
}

function bindDependencies(derivation: IDerivation) {
    // invariant(derivation.dependenciesState !== IDerivationState.NOT_TRACKING, "INTERNAL ERROR bindDependencies expects derivation.dependenciesState !== -1");
    // 暂存旧的observable列表
    const prevObserving = derivation.observing
    // 用新的observable列表替换旧的列表
    const observing = (derivation.observing = derivation.newObserving!)
    let lowestNewObservingDerivationState = IDerivationState.UP_TO_DATE

    // Go through all new observables and check diffValue: (this list can contain duplicates):
    //   0: first occurrence, change to 1 and keep it
    //   1: extra occurrence, drop it
    // 遍历所有新的observable，去除重复的observable
    let i0 = 0,
        l = derivation.unboundDepsCount
    for (let i = 0; i < l; i++) {
        // 这里实际上用了双指针方法去重，i0为慢指针，i为快指针
        const dep = observing[i]
        // 跳过重复的值，即diffValue 等于 1的值；当跳过重复的值时i与i0就不相等了，i领先于i0
        if (dep.diffValue === 0) {
            dep.diffValue = 1
            if (i0 !== i) observing[i0] = dep
            i0++
        }

        // Upcast is 'safe' here, because if dep is IObservable, `dependenciesState` will be undefined,
        // not hitting the condition
        if (((dep as any) as IDerivation).dependenciesState > lowestNewObservingDerivationState) {
            lowestNewObservingDerivationState = ((dep as any) as IDerivation).dependenciesState
        }
    }
    observing.length = i0

    derivation.newObserving = null // newObserving shouldn't be needed outside tracking (statement moved down to work around FF bug, see #614)

    // Go through all old observables and check diffValue: (it is unique after last bindDependencies)
    //   0: it's not in new observables, unobserve it
    //   1: it keeps being observed, don't want to notify it. change to 0
    // 遍历旧observable列表：
    // diffValue为0表示不在新的observable列表中（每一轮新的observables的diffValue都会被设置为1），在derivation中解除观察；
    // diffValue为1表示该值仍在被观察（每一轮的依赖更新时，假如一个可观察对象dep在之前一轮也在依赖列表中，
    // 此时dep对象是同一个，新的一轮更新newObserving依赖时，diffValue会被更新为1）；
    // 和newObserving去重操作一样巧妙，diffValue的作用很大呀
    l = prevObserving.length
    while (l--) {
        const dep = prevObserving[l]
        if (dep.diffValue === 0) {
            removeObserver(dep, derivation)
        }
        // 新旧遍历之后依旧将diffValue置0，即上面的 first occurrence
        dep.diffValue = 0
    }

    // Go through all new observables and check diffValue: (now it should be unique)
    //   0: it was set to 0 in last loop. don't need to do anything.
    //   1: it wasn't observed, let's observe it. set back to 0
    // 这里需要做这一步操作是因为第一步newObserving过滤后是新增的观察对象，
    // 第二步prevObserving将依赖的diffValue置0，但prevObserving中的依赖已经是addObserver()过的，
    // 所以就需要标记一下（diffValue置0），最后newObserving中的依赖diffValue为1的就进行addObserver()
    while (i0--) {
        const dep = observing[i0]
        if (dep.diffValue === 1) {
            dep.diffValue = 0
            // 给 observableValue 注册 observer
            // value change 时 observable(object, array, set...) 调用 this.atom.reportChanged() 发送通知
            // foreach 通知每个 reaction 调用 onBecomeStale，也就是 schedule 方法

            // 调用链路：value change --> observable设置值set(newVal) --> this.atom.reportChanged() 
            // --> propagateChanged(this) --> observable.observers.forEach调用observer.onBecomeStale() 
            // --> reaction.schedule() --> globalState.pendingReactions.push(this)以及runReactions() 
            // --> reactionScheduler() 
            // --> allReactions.forEach()执行每个reaction的reaction.runReaction() 
            // --> 执行每个reaction的this.onInvalidate()
            addObserver(dep, derivation)
        }
    }
    // NOTE: 收集完的依赖保存到 reaction.observing 中，在 getDependencyTree api 中会调用到

    // 对于新添加的观察数据，将 derivation 添加 globalState.pendingReactions 中，
    // 在当前事务周期中处理
    // Some new observed derivations may become stale during this derivation computation
    // so they have had no chance to propagate staleness (#916)
    if (lowestNewObservingDerivationState !== IDerivationState.UP_TO_DATE) {
        derivation.dependenciesState = lowestNewObservingDerivationState
        derivation.onBecomeStale()
    }
}

enum IDerivationState {
    NOT_TRACKING = -1,
    UP_TO_DATE = 0,
    POSSIBLY_STALE = 1,
    STALE = 2
}

import { observable } from "mobx"

class Todo {

  id = Math.random()

  @observable title = ""

  @observable finished = false

}

const observable: IObservableFactory & IObservableFactories & { enhancer: IEnhancer<any>}

const observableFactories: IObservableFactories = {
    // 对于基本类型 string, boolean, number 可以用 box 来劫持
    box<T = any>(value?: T, options?: CreateObservableOptions): IObservableValue<T> {
        if (arguments.length > 2) incorrectlyUsedAsDecorator("box")
        const o = asCreateObservableOptions(options)
        //  getEnhancerFromOptions(o) 生成enhancer
        return new ObservableValue(value, getEnhancerFromOptions(o), o.name, true, o.equals)
    },
    array<T = any>(initialValues?: T[], options?: CreateObservableOptions): IObservableArray<T> {
        if (arguments.length > 2) incorrectlyUsedAsDecorator("array")
        const o = asCreateObservableOptions(options)
        return createObservableArray(initialValues, getEnhancerFromOptions(o), o.name) as any
    },
    map<K = any, V = any>(
        initialValues?: IObservableMapInitialValues<K, V>,
        options?: CreateObservableOptions
    ): ObservableMap<K, V> {
        if (arguments.length > 2) incorrectlyUsedAsDecorator("map")
        const o = asCreateObservableOptions(options)
        return new ObservableMap<K, V>(initialValues, getEnhancerFromOptions(o), o.name)
    },
    set<T = any>(
        initialValues?: IObservableSetInitialValues<T>,
        options?: CreateObservableOptions
    ): ObservableSet<T> {
        if (arguments.length > 2) incorrectlyUsedAsDecorator("set")
        const o = asCreateObservableOptions(options)
        return new ObservableSet<T>(initialValues, getEnhancerFromOptions(o), o.name)
    },
    object<T = any>(
        props: T,
        decorators?: { [K in keyof T]: Function },
        options?: CreateObservableOptions
    ): T & IObservableObject {
        if (typeof arguments[1] === "string") incorrectlyUsedAsDecorator("object")
        const o = asCreateObservableOptions(options)
        if (o.proxy === false) {
            // 采用Object.defineProperty劫持
            return extendObservable({}, props, decorators, o) as any
        } else {
            const defaultDecorator = getDefaultDecoratorFromObjectOptions(o)
            // extendObservable中会将adm赋值给属性$mobx，以供proxy代理时调用
            const base = extendObservable({}, undefined, undefined, o) as any
            const proxy = createDynamicObservableObject(base)
            extendObservableObjectWithProperties(proxy, props, decorators, defaultDecorator)
            return proxy
        }
    },
    ref: refDecorator,
    shallow: shallowDecorator,
    deep: deepDecorator,
    struct: refStructDecorator
} as any

Object.keys(observableFactories).forEach(name => (observable[name] = observableFactories[name]))

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

    // it is an observable already, done
    if (isObservable(v)) return v

    // something that can be converted and mutated?
    const res = isPlainObject(v)
        ? observable.object(v, arg2, arg3)
        : Array.isArray(v)
        ? observable.array(v, arg2)
        : isES6Map(v)
        ? observable.map(v, arg2)
        : isES6Set(v)
        ? observable.set(v, arg2)
        : v

    // this value could be converted to a new observable data structure, return it
    if (res !== v) return res
}

const person = observable({
    name: 'lawler',
    get labelText() {
        return this.showAge ? `${this.name} (age: ${this.age})` : this.name;
    },
    setAge(age) {
        his.age = age;
    }
}, { 
    // 此为第二个参数 decorators
    // setAge设置为action类型，其他属性默认为 observables / computed
    setAge: action 

} /*, 这里传第三个 options 参数 *\/);

object<T = any>(
        props: T,
        decorators?: { [K in keyof T]: Function },
        options?: CreateObservableOptions
    ): T & IObservableObject {
        if (typeof arguments[1] === "string") incorrectlyUsedAsDecorator("object")
        const o = asCreateObservableOptions(options)
        if (o.proxy === false) {
            // 采用Object.defineProperty劫持
            return extendObservable({}, props, decorators, o) as any
        } else {
            const defaultDecorator = getDefaultDecoratorFromObjectOptions(o)
            // extendObservable中会将adm赋值给属性$mobx，以供proxy代理时调用
            const base = extendObservable({}, undefined, undefined, o) as any
            const proxy = createDynamicObservableObject(base)
            extendObservableObjectWithProperties(proxy, props, decorators, defaultDecorator)
            return proxy
        }
    

const o = { name: thing, deep: true, proxy: true }

const defaultCreateObservableOptions = {
    deep: true,
    name: undefined,
    defaultDecorator: undefined,
    proxy: true
}

const defaultDecorator = getDefaultDecoratorFromObjectOptions(o) 默认项返回 deepDecorator

const deepDecorator = createDecoratorForEnhancer(deepEnhancer)

// 删除了一些开发环境的代码
function createDecoratorForEnhancer(enhancer: IEnhancer<any>): IObservableDecorator {
    invariant(enhancer)
    const decorator = createPropDecorator(
        true,
        (
            target: any,
            propertyName: PropertyKey,
            descriptor: BabelDescriptor | undefined,
            _decoratorTarget,
            decoratorArgs: any[]
        ) => {
            const initialValue = descriptor
                ? descriptor.initializer
                    ? descriptor.initializer.call(target)
                    : descriptor.value
                : undefined
            /**
             * asObservableObject，其传入参数为原始对象，
             * 返回值是ObservableObjectAdministration类型对象adm
             * 同时将adm绑定到$mobx属性上，共对象使用
             * 
             * 并且链式调用了 addObservableProp，
             * 通过 enhancer，把 propertyName 属性赋上劫持后的 initialValue
             */
            asObservableObject(target).addObservableProp(propertyName, initialValue, enhancer)
        }
    )
   
    const res: any = decorator
    res.enhancer = enhancer
    return res
}

export function asObservableObject(
    target: any,
    name: PropertyKey = "",
    defaultEnhancer: IEnhancer<any> = deepEnhancer
): ObservableObjectAdministration {
    if (Object.prototype.hasOwnProperty.call(target, $mobx)) return target[$mobx]

    if (!isPlainObject(target))
        name = (target.constructor.name || "ObservableObject") + "@" + getNextId()
    if (!name) name = "ObservableObject@" + getNextId()

    const adm = new ObservableObjectAdministration(
        target,
        new Map(),
        stringifyKey(name),
        defaultEnhancer
    )
    addHiddenProp(target, $mobx, adm)
    return adm
}

/**
 * 可以看出 adm 其实也是个封装类，具体围绕 values 展开，
 * 而 values 是个 Map，键为 PropertyKey，值为 ObservableValue像 read，write 等方法，
 * 最后都是调用的 ObservableValue 提供的 api
 */
class ObservableObjectAdministration
    constructor(
        public target: any,
        public values = new Map<PropertyKey, ObservableValue<any> | ComputedValue<any>>(),
        public name: string,
        public defaultEnhancer: IEnhancer<any>
    ) {
        this.keysAtom = new Atom(name + ".keys")
    }

    read(key: PropertyKey) {
        return this.values.get(key)!.get()
    }

    write(key: PropertyKey, newValue) {
        // 省略
    }

    has(key: PropertyKey) {
        // 省略
    }

    addObservableProp(
        propName: PropertyKey,
        newValue,
        enhancer: IEnhancer<any> = this.defaultEnhancer
    ) {
        // 省略
    }

    addComputedProp(
        propertyOwner: any, // where is the property declared?
        propName: PropertyKey,
        options: IComputedValueOptions<any>
    ) {
       // 省略
    }

    remove(key: PropertyKey) {
        // 省略
    }

    observe(callback: (changes: IObjectDidChange) => void, fireImmediately?: boolean): Lambda {
        return registerListener(this, callback)
    }
}

 addObservableProp(
        propName: PropertyKey,
        newValue,
        enhancer: IEnhancer<any> = this.defaultEnhancer
    ) {
        // this为adm
        const { target } = this
        assertPropertyConfigurable(target, propName)

        const observable = new ObservableValue(
            newValue,
            enhancer,
            `${this.name}.${stringifyKey(propName)}`,
            false
        )
        
        this.values.set(propName, observable)
        newValue = (observable as any).value // observableValue might have changed it

        Object.defineProperty(target, propName, generateObservablePropConfig(propName))
        this.notifyPropertyAddition(propName, newValue)
    }

const base = extendObservable({}, undefined, undefined, o) as any

function extendObservable<A extends Object, B extends Object>(
    target: A,
    properties?: B,
    decorators?: { [K in keyof B]?: Function },
    options?: CreateObservableOptions
): A & B {
    options = asCreateObservableOptions(options)
    const defaultDecorator = getDefaultDecoratorFromObjectOptions(options)
    //  这里target是空对象‘{}’
    initializeInstance(target) 
    // target的属性$mobx值为adm对象
    asObservableObject(target, options.name, defaultDecorator.enhancer) // make sure object is observable, even without initial props
    if (properties)
        extendObservableObjectWithProperties(target, properties, decorators, defaultDecorator)
    return target as any
}

const proxy = createDynamicObservableObject(base)

function createDynamicObservableObject(base) {
    // objectProxyTraps中定义了代理的属性(has/get/set等)，其实还是调用了adm对象的方法
    const proxy = new Proxy(base, objectProxyTraps)
    base[$mobx].proxy = proxy
    return proxy
}

 get(target: IIsObservableObject, name: PropertyKey) {
        if (name === $mobx || name === "constructor" || name === mobxDidRunLazyInitializersSymbol)
            return target[name]
        const adm = getAdm(target)
        const observable = adm.values.get(name)
        if (observable instanceof Atom) {
            const result = (observable as any).get()
            if (result === undefined) {
                // This fixes #1796, because deleting a prop that has an
                // undefined value won't retrigger a observer (no visible effect),
                // the autorun wouldn't subscribe to future key changes (see also next comment)
                adm.has(name as any)
            }
            return result
        }
        // make sure we start listening to future keys
        // note that we only do this here for optimization
        if (isPropertyKey(name)) adm.has(name)
        return target[name]
    }

extendObservableObjectWithProperties(proxy, props, decorators, defaultDecorator)

function extendObservableObjectWithProperties(
    target,
    properties,
    decorators,
    defaultDecorator
) {
    startBatch()
    try {
        const keys = getPlainObjectKeys(properties)
        for (const key of keys) {
            const descriptor = Object.getOwnPropertyDescriptor(properties, key)!
            
            const decorator =
                decorators && key in decorators
                    ? decorators[key]
                    : descriptor.get
                    ? computedDecorator
                    : defaultDecorator

            const resultDescriptor = decorator!(target, key, descriptor, true)
            if (
                resultDescriptor // otherwise, assume already applied, due to `applyToInstance`
            )
                Object.defineProperty(target, key, resultDescriptor)
        }
    } finally {
        endBatch()
    }
}

const action: IActionFactory = function action(arg1, arg2?, arg3?, arg4?): any {
    // action(fn() {})
    if (arguments.length === 1 && typeof arg1 === "function")
        return createAction(arg1.name || "<unnamed action>", arg1)
    // action("name", fn() {})
    if (arguments.length === 2 && typeof arg2 === "function") return createAction(arg1, arg2)

    // @action("name") fn() {}
    if (arguments.length === 1 && typeof arg1 === "string") return namedActionDecorator(arg1)

    // @action fn() {}
    if (arg4 === true) {
        // apply to instance immediately
        addHiddenProp(arg1, arg2, createAction(arg1.name || arg2, arg3.value, this))
    } else {
        return namedActionDecorator(arg2).apply(null, arguments as any)
    }
} as any

function addHiddenProp(object: any, propName: PropertyKey, value: any) {
    Object.defineProperty(object, propName, {
        enumerable: false,
        writable: true,
        configurable: true,
        value
    })
}

function createAction(actionName: string, fn: Function, ref?: Object): Function & IAction {
    const res = function() {
        // 首先将runInfo等信息保存起来，然后执行 fn ，最后恢复刚才保存的信息并且会调用endBatch()
        return executeAction(actionName, fn, ref || this, arguments)
    }
    ;(res as any).isMobxAction = true
   
    return res as any
}

function executeAction(actionName: string, fn: Function, scope?: any, args?: IArguments) {
    // 将derivation等信息保存起来，在_endAction()中恢复
    const runInfo = _startAction(actionName, scope, args)
    try {
        return fn.apply(scope, args)
    } catch (err) {
        runInfo.error = err
        throw err
    } finally {
        _endAction(runInfo)
    }
}

function createObservableArray<T>(
    initialValues: any[] | undefined,
    enhancer: IEnhancer<T>,
    name = "ObservableArray@" + getNextId(),
    owned = false
): IObservableArray<T> {
    const adm = new ObservableArrayAdministration(name, enhancer, owned)
    addHiddenFinalProp(adm.values, $mobx, adm)
    const proxy = new Proxy(adm.values, arrayTraps) as any
    adm.proxy = proxy
    if (initialValues && initialValues.length) {
        const prev = allowStateChangesStart(true)
        // 初始化
        adm.spliceWithArray(0, 0, initialValues)
        allowStateChangesEnd(prev)
    }
    return proxy
}

class ObservableArrayAdministration
    implements IInterceptable<IArrayWillChange<any> | IArrayWillSplice<any>>, IListenable {
    atom: IAtom
    values: any[] = []
    interceptors
    changeListeners
    enhancer: (newV: any, oldV: any | undefined) => any
    dehancer: any
    proxy: any[] = undefined as any
    lastKnownLength = 0

    constructor(name, enhancer: IEnhancer<any>, public owned: boolean) {
        this.atom = new Atom(name || "ObservableArray@" + getNextId())
        this.enhancer = (newV, oldV) => enhancer(newV, oldV, name + "[..]")
    }

    getArrayLength(): number {
        this.atom.reportObserved()
        return this.values.length
    }

    setArrayLength(newLength: number) {
        if (typeof newLength !== "number" || newLength < 0)
            throw new Error("[mobx.array] Out of range: " + newLength)
        let currentLength = this.values.length
        if (newLength === currentLength) return
        else if (newLength > currentLength) {
            const newItems = new Array(newLength - currentLength)
            for (let i = 0; i < newLength - currentLength; i++) newItems[i] = undefined // No Array.fill everywhere...
            this.spliceWithArray(currentLength, 0, newItems)
        } else this.spliceWithArray(newLength, currentLength - newLength)
    }

    updateArrayLength(oldLength: number, delta: number) {
        if (oldLength !== this.lastKnownLength)
            throw new Error(
                "[mobx] Modification exception: the internal structure of an observable array was changed."
            )
        this.lastKnownLength += delta
    }

    spliceWithArray(index: number, deleteCount?: number, newItems?: any[]): any[] {
        checkIfStateModificationsAreAllowed(this.atom)
        const length = this.values.length

        if (index === undefined) index = 0
        else if (index > length) index = length
        // inedx小于0则从list尾部取值
        else if (index < 0) index = Math.max(0, length + index)

        if (arguments.length === 1) deleteCount = length - index
        else if (deleteCount === undefined || deleteCount === null) deleteCount = 0
        // Math.min(deleteCount, length - index) 防止删除的数量超过数组长度
        else deleteCount = Math.max(0, Math.min(deleteCount, length - index))

        if (newItems === undefined) newItems = EMPTY_ARRAY

        if (hasInterceptors(this)) {
            const change = interceptChange<IArrayWillSplice<any>>(this as any, {
                object: this.proxy as any,
                type: "splice",
                index,
                removedCount: deleteCount,
                added: newItems
            })
            if (!change) return EMPTY_ARRAY
            deleteCount = change.removedCount
            newItems = change.added
        }

        // 对新值用 enhancer 进行劫持
        newItems = newItems.length === 0 ? newItems : newItems.map(v => this.enhancer(v, undefined))
        
        // 将劫持后的 array 更新到 this.values 中
        // res 为删除后的元素数组
        const res = this.spliceItemsIntoValues(index, deleteCount, newItems)

        if (deleteCount !== 0 || newItems.length !== 0) this.notifyArraySplice(index, newItems, res)
        // 对删除后的元素进行 dehancer 处理
        return this.dehanceValues(res)
    }

    spliceItemsIntoValues(index, deleteCount, newItems: any[]): any[] {
        if (newItems.length < MAX_SPLICE_SIZE) {
            // splice返回删除的元素
            return this.values.splice(index, deleteCount, ...newItems)
        } else {
            // res为删除的元素
            const res = this.values.slice(index, index + deleteCount)
            this.values = this.values
                .slice(0, index)
                .concat(newItems, this.values.slice(index + deleteCount))
            return res
        }
    }

    notifyArrayChildUpdate(index: number, newValue: any, oldValue: any) {
        // 省略...
        this.atom.reportChanged()
    }

    notifyArraySplice(index: number, added: any[], removed: any[]) {
        // 省略...
        this.atom.reportChanged()
    }
}

addHiddenFinalProp(adm.values, $mobx, adm)

const proxy = new Proxy(adm.values, arrayTraps)

const arrayTraps = {
    get(target, name) {
        if (name === $mobx) return target[$mobx]
        if (name === "length") return target[$mobx].getArrayLength()
        if (typeof name === "number") {
            return arrayExtensions.get.call(target, name)
        }
        if (typeof name === "string" && !isNaN(name as any)) {
            return arrayExtensions.get.call(target, parseInt(name))
        }
        if (arrayExtensions.hasOwnProperty(name)) {
            return arrayExtensions[name]
        }
        return target[name]
    },
    set(target, name, value): boolean {
        if (name === "length") {
            target[$mobx].setArrayLength(value)
        }
        if (typeof name === "number") {
            arrayExtensions.set.call(target, name, value)
        }
        if (typeof name === "symbol" || isNaN(name)) {
            target[name] = value
        } else {
            // numeric string
            arrayExtensions.set.call(target, parseInt(name), value)
        }
        return true
    },
    preventExtensions(target) {
        fail(`Observable arrays cannot be frozen`)
        return false
    }
}

// 全部调用对象上的属性$mobx值---adm来对values操作
const arrayExtensions = {
        intercept(handler: IInterceptor<IArrayWillChange<any> | IArrayWillSplice<any>>): Lambda {
            return this[$mobx].intercept(handler)
        },
        observe(
            listener: (changeData: IArrayChange<any> | IArraySplice<any>) => void,
            fireImmediately = false
        ): Lambda {
            const adm: ObservableArrayAdministration = this[$mobx]
            return adm.observe(listener, fireImmediately)
        },
        clear(): any[] {
            return this.splice(0)
        },
        replace(newItems: any[]) {
            const adm: ObservableArrayAdministration = this[$mobx]
            return adm.spliceWithArray(0, adm.values.length, newItems)
        },
        toJS(): any[] {
            return (this as any).slice()
        },
        toJSON(): any[] {
            // Used by JSON.stringify
            return this.toJS()
        },

        splice(index: number, deleteCount?: number, ...newItems: any[]): any[] {
            const adm: ObservableArrayAdministration = this[$mobx]
            switch (arguments.length) {
                case 0:
                    return []
                case 1:
                    return adm.spliceWithArray(index)
                case 2:
                    return adm.spliceWithArray(index, deleteCount)
            }
            return adm.spliceWithArray(index, deleteCount, newItems)
        },

        spliceWithArray(index: number, deleteCount?: number, newItems?: any[]): any[] {
            const adm: ObservableArrayAdministration = this[$mobx]
            return adm.spliceWithArray(index, deleteCount, newItems)
        },

        push(...items: any[]): number {
            const adm: ObservableArrayAdministration = this[$mobx]
            adm.spliceWithArray(adm.values.length, 0, items)
            return adm.values.length
        },

        pop() {
            return this.splice(Math.max(this[$mobx].values.length - 1, 0), 1)[0]
        },

        shift() {
            return this.splice(0, 1)[0]
        },

        unshift(...items: any[]): number {
            const adm = this[$mobx]
            adm.spliceWithArray(0, 0, items)
            return adm.values.length
        },

        reverse(): any[] {
            const clone = (<any>this).slice()
            return clone.reverse.apply(clone, arguments)
        },

        sort(compareFn?: (a: any, b: any) => number): any[] {
            const clone = (<any>this).slice()
            return clone.sort.apply(clone, arguments)
        },

        remove(value: any): boolean {
            const adm: ObservableArrayAdministration = this[$mobx]
            const idx = adm.dehanceValues(adm.values).indexOf(value)
            if (idx > -1) {
                this.splice(idx, 1)
                return true
            }
            return false
        },

        get(index: number): any | undefined {
            const adm: ObservableArrayAdministration = this[$mobx]
            if (adm) {
                if (index < adm.values.length) {
                    adm.atom.reportObserved()
                    return adm.dehanceValue(adm.values[index])
                }
            }
            return undefined
        },

        set(index: number, newValue: any) {
            const adm: ObservableArrayAdministration = this[$mobx]
            const values = adm.values
            if (index < values.length) {
                // update at index in range
                checkIfStateModificationsAreAllowed(adm.atom)
                const oldValue = values[index]
                if (hasInterceptors(adm)) {
                    const change = interceptChange<IArrayWillChange<any>>(adm as any, {
                        type: "update",
                        object: adm.proxy as any, // since "this" is the real array we need to pass its proxy
                        index,
                        newValue
                    })
                    if (!change) return
                    newValue = change.newValue
                }
                newValue = adm.enhancer(newValue, oldValue)
                const changed = newValue !== oldValue
                if (changed) {
                    values[index] = newValue
                    adm.notifyArrayChildUpdate(index, newValue, oldValue)
                }
            } else if (index === values.length) {
                // add a new item
                adm.spliceWithArray(index, 0, [newValue])
            } else {
                // out of bounds
                throw new Error(
                    `[mobx.array] Index out of bounds, ${index} is larger than ${values.length}`
                )
            }
        }
    }

;[
    "concat",
    "every",
    "filter",
    "forEach",
    "indexOf",
    "join",
    "lastIndexOf",
    "map",
    "reduce",
    "reduceRight",
    "slice",
    "some",
    "toString",
    "toLocaleString"
].forEach(funcName => {
    arrayExtensions[funcName] = function() {
        const adm: ObservableArrayAdministration = this[$mobx]
        // atom 中有reportObserved和reportChanged函数
        adm.atom.reportObserved()
        const res = adm.dehanceValues(adm.values)
        return res[funcName].apply(res, arguments)
    }
})

 constructor(
        initialData?: IObservableMapInitialValues<K, V>,
        public enhancer: IEnhancer<V> = deepEnhancer,
        public name = "ObservableMap@" + getNextId()
    ) {
        this._data = new Map()
        // this.get()中会调用this.has()
        // this.has()中会调用this._hasMap.set()设置值
        // 所以只有当observerableMap.get('xxx')时，_hasMap中才会存有‘xxx’属性和值
        // 当在map中新增属性或者删除属性时会调用_updateHasMapEntry()，
        // _updateHasMapEntry()的作用是设置新增属性'xxx'时其value值为'true', 删除'xxx'时其value值为'false'
        // 例如autorun(() => console.log(counterStore.testMap.get('xxx')));
        // 这时，_hasMap中存有值了；

        // 但如果在store中@action func() {this.testMap.get('xxx')}，
        // 这样是不会把‘xxx’放入_hasMap中的

        // 总结：_hasMap用来存储新增或删除的keys（仅在autorun这类型的reaction中才生效）
        // 因而_hasMap是缓存map中keys的变化--新增还是删除状态
        this._hasMap = new Map()
        // 将初始数据的属性和值赋值给this._data
        // merge时会调用this.set()-->this._addValue()，使得_data属性变成ObservableValue
        this.merge(initialData)
    }

// 将other对象的属性依次赋值给this对象，并返回this
merge(other: ObservableMap<K, V> | IKeyValueMap<V> | any): ObservableMap<K, V> {
    if (isObservableMap(other)) {
    	other = other.toJS()
	}
    // transaction开启一个事务，在事务执行期间视图view不会更新，是一个同步执行的过程
    transaction(() => {
        if (isPlainObject(other))
            getPlainObjectKeys(other).forEach(key => this.set((key as any) as K, other[key]))
        else if (Array.isArray(other)) other.forEach(([key, value]) => this.set(key, value))
        else if (isES6Map(other)) {
            if (other.constructor !== Map)
                fail("Cannot initialize from classes that inherit from Map: " + other.constructor.name)
            other.forEach((value, key) => this.set(key, value))
        } else if (other !== null && other !== undefined)
            fail("Cannot initialize map from " + other)
    })
    return this
}

set(key: K, value: V) {
    const hasKey = this._has(key)

    if (hasKey) {
        this._updateValue(key, value)
    } else {
        this._addValue(key, value)
    }
    return this
}

private _updateValue(key: K, newValue: V | undefined) {
    const observable = this._data.get(key)!
          newValue = (observable as any).prepareNewValue(newValue) as V
          if (newValue !== globalState.UNCHANGED) {
              observable.setNewValue(newValue as V)
          }
}

private _addValue(key: K, newValue: V) {
    checkIfStateModificationsAreAllowed(this._keysAtom)
    transaction(() => {
        const observable = new ObservableValue(
            newValue,
            this.enhancer,
            `${this.name}.${stringifyKey(key)}`,
            false
        )
        this._data.set(key, observable)
        newValue = (observable as any).value // value might have been changed
        this._updateHasMapEntry(key, true)
        this._keysAtom.reportChanged()
    })
}

constructor(
        initialData?: IObservableSetInitialValues<T>,
        enhancer: IEnhancer<T> = deepEnhancer,
        public name = "ObservableSet@" + getNextId()
    ) {
        if (typeof Set !== "function") {
            throw new Error(
                "mobx.set requires Set polyfill for the current browser. Check babel-polyfill or core-js/es6/set.js"
            )
        }

        this.enhancer = (newV, oldV) => enhancer(newV, oldV, name)

        if (initialData) {
            this.replace(initialData)
        }
    }

 replace(other: ObservableSet<T> | IObservableSetInitialValues<T>): ObservableSet<T> {
        if (isObservableSet(other)) {
            other = other.toJS()
        }

        transaction(() => {
            if (Array.isArray(other)) {
                this.clear()
                other.forEach(value => this.add(value))
            } else if (isES6Set(other)) {
                this.clear()
                other.forEach(value => this.add(value))
            } else if (other !== null && other !== undefined) {
                fail("Cannot initialize set from " + other)
            }
        })

        return this
    }

add(value: T) {
    checkIfStateModificationsAreAllowed(this._atom)
    if (!this.has(value)) {
        transaction(() => {
            this._data.add(this.enhancer(value, undefined))
            this._atom.reportChanged()
        })
    }

    return this
}

constructor(
        value: T,
        public enhancer: IEnhancer<T>,
        public name = "ObservableValue@" + getNextId(),
        notifySpy = true,
        private equals: IEqualsComparer<any> = comparer.default
    ) {
        super(name)
        this.value = enhancer(value, undefined, name)
    }

class OrderLine {
    @observable price = 0;
    @observable amount = 1;

    constructor(price) {
        this.price = price;
    }

    @computed get total() {
        return this.price * this.amount;
    }
}

const orderLine = observable.object({
    price: 0,
    amount: 1,
    get total() {
        return this.price * this.amount
    }
})

const computed: IComputed = function computed(arg1, arg2, arg3) {
    if (typeof arg2 === "string") {
        // @computed
        return computedDecorator.apply(null, arguments)
    }
    if (arg1 !== null && typeof arg1 === "object" && arguments.length === 1) {
        // @computed({ options })
        return computedDecorator.apply(null, arguments)
    }

    // computed(expr, options?)
    const opts: IComputedValueOptions<any> = typeof arg2 === "object" ? arg2 : {}
    opts.get = arg1
    opts.set = typeof arg2 === "function" ? arg2 : opts.set
    opts.name = opts.name || arg1.name || "" /* for generated name */

    return new ComputedValue(opts)
}

const computedDecorator = createPropDecorator(
    false,
    (
        instance: any,
        propertyName: PropertyKey,
        descriptor: any,
        decoratorTarget: any,
        decoratorArgs: any[]
    ) => {
        const { get, set } = descriptor 
        const options = decoratorArgs[0] || {}
        asObservableObject(instance).addComputedProp(instance, propertyName, {
            get,
            set,
            context: instance,
            ...options
        })
    }
)

addComputedProp(
        propertyOwner: any, 
        propName: PropertyKey,
        options: IComputedValueOptions<any>
    ) {
        const { target } = this
        options.name = options.name || `${this.name}.${stringifyKey(propName)}`
        this.values.set(propName, new ComputedValue(options))
        if (propertyOwner === target || isPropertyConfigurable(propertyOwner, propName))
            Object.defineProperty(propertyOwner, propName, generateComputedPropConfig(propName))
    }

function createPropDecorator(
    propertyInitiallyEnumerable: boolean,
    propertyCreator: PropertyCreator
) {
    return function decoratorFactory() {
        let decoratorArguments: any[]

        const decorator = function decorate(
            target: DecoratorTarget,
            prop: string,
            descriptor: BabelDescriptor | undefined,
            applyImmediately?: any
        ) {
            if (applyImmediately === true) {
                propertyCreator(target, prop, descriptor, target, decoratorArguments)
                return null
            }
            
            if (!Object.prototype.hasOwnProperty.call(target, mobxPendingDecorators)) {
                const inheritedDecorators = target[mobxPendingDecorators]
                addHiddenProp(target, mobxPendingDecorators, { ...inheritedDecorators })
            }
            /**
             * createPropDecorator 传进来的第二个参数，
             * 然后放进了 target[mobxPendingDecorators]![prop] 属性中，
             * 供 initializeInstance 使用
             */
            target[mobxPendingDecorators]![prop] = {
                prop,
                propertyCreator,
                descriptor,
                decoratorTarget: target,
                decoratorArguments
            }
            return createPropertyInitializerDescriptor(prop, propertyInitiallyEnumerable)
        }

        if (quacksLikeADecorator(arguments)) {
            // @decorator 无参数
            decoratorArguments = EMPTY_ARRAY
            // 无参时，返回描述符descriptor（decorator.apply(null, arguments)执行返回描述符）
            return decorator.apply(null, arguments as any)
        } else {
            // @decorator(args) 有参数
            // decoratorArguments在此处赋值，在 decorator 函数中使用（利用闭包）
            decoratorArguments = Array.prototype.slice.call(arguments)
            return decorator
        }
    }
}

function createPropertyInitializerDescriptor(
    prop: string,
    enumerable: boolean
): PropertyDescriptor {
    const cache = enumerable ? enumerableDescriptorCache : nonEnumerableDescriptorCache
    return (
        cache[prop] ||
        (cache[prop] = {
            configurable: true,
            enumerable: enumerable,
            get() {
                initializeInstance(this)
                return this[prop]
            },
            set(value) {
                initializeInstance(this)
                this[prop] = value
            }
        })
    )
}

function initializeInstance(target: DecoratorTarget) {
    if (target[mobxDidRunLazyInitializersSymbol] === true) return
    
    const decorators = target[mobxPendingDecorators]
    if (decorators) {
        addHiddenProp(target, mobxDidRunLazyInitializersSymbol, true)
        // Build property key array from both strings and symbols
        const keys = [...Object.getOwnPropertySymbols(decorators), ...Object.keys(decorators)]
        for (const key of keys) {
            const d = decorators[key as any]
            d.propertyCreator(target, d.prop, d.descriptor, d.decoratorTarget, d.decoratorArguments)
        }
    }
}

public get(): T {
        if (this.isComputing) fail(`Cycle detected in computation ${this.name}: ${this.derivation}`)
        // 初始化获取绑定计算属性的依赖关系，或者在 action 中直接获取计算属性
        if (globalState.inBatch === 0 && this.observers.size === 0 && !this.keepAlive) {
            if (shouldCompute(this)) {
                this.warnAboutUntrackedRead()
                startBatch() 
                this.value = this.computeValue(false)
                endBatch()
            }
        } else {
            // reaction.runReaction 处理逻辑中，将进入第二个条件分支
            // ComputedValue 不仅会把自己 reportObserved 给 reaction
            reportObserved(this)
            // 同时自己也是 IDerivation 的派生类，通过 trackAndCompute（里面会调用 trackDerivedFunction）来取值
            // 如果 trackAndCompute 返回 true，即值改变了，向监听自己的 observers 上报 change
            if (shouldCompute(this)) if (this.trackAndCompute()) propagateChangeConfirmed(this)
        }
        const result = this.value!

        if (isCaughtException(result)) throw result.cause
        return result
    }

computeValue(track: boolean) {
        this.isComputing = true
        globalState.computationDepth++
        let res: T | CaughtException
        if (track) {
            res = trackDerivedFunction(this, this.derivation, this.scope)
        } else {
            if (globalState.disableErrorBoundaries === true) {
                res = this.derivation.call(this.scope)
            } else {
                try {
                    res = this.derivation.call(this.scope)
                } catch (e) {
                    res = new CaughtException(e)
                }
            }
        }
        globalState.computationDepth--
        this.isComputing = false
        return res
    }

function propagateMaybeChanged(observable: IObservable) {
    if (observable.lowestObserverState !== IDerivationState.UP_TO_DATE) return
    observable.lowestObserverState = IDerivationState.POSSIBLY_STALE

    observable.observers.forEach(d => {
        if (d.dependenciesState === IDerivationState.UP_TO_DATE) {
            d.dependenciesState = IDerivationState.POSSIBLY_STALE
            if (d.isTracing !== TraceMode.NONE) {
                logTraceInfo(d, observable)
            }
            d.onBecomeStale()
        }
    })
}

// ComputedValue 值改变重新计算时调用
function propagateChangeConfirmed(observable: IObservable) {
    if (observable.lowestObserverState === IDerivationState.STALE) return
    observable.lowestObserverState = IDerivationState.STALE

    observable.observers.forEach(d => {
        if (d.dependenciesState === IDerivationState.POSSIBLY_STALE)
            d.dependenciesState = IDerivationState.STALE
        else if (
            // 正在依赖收集阶段
            d.dependenciesState === IDerivationState.UP_TO_DATE
        )
            observable.lowestObserverState = IDerivationState.UP_TO_DATE
    })
}