vue-reactive

• 入口

  • path：packages/reactivity/src/reactive.ts

    export const enum ReactiveFlags {
    // 初始都为undefined
    SKIP = '__v_skip', //无需响应的对象
    IS_REACTIVE = '__v_isReactive', //响应式对象
    IS_READONLY = '__v_isReadonly', //只读数据
    RAW = '__v_raw' //取原始对象
    }
    const enum TargetType {
    INVALID = 0, // 无效
    COMMON = 1, // Array/Object
    COLLECTION = 2 // map/set/weakMap/weakSet
    }

    export function reactive(target: object) {
      // 如果尝试观察只读代理，请返回只读版本。
      if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
        return target
      }
      return createReactiveObject(
        target,
        false,
        mutableHandlers,
        mutableCollectionHandlers,
        reactiveMap
      )
    }

  • createReactiveObject

    // 机翻下英文注释就能看明白...
    function createReactiveObject(
      target: Target,
      isReadonly: boolean,// reactive函数调用传参为false
      baseHandlers: ProxyHandler<any>,
      collectionHandlers: ProxyHandler<any>,
      proxyMap: WeakMap<Target, any>
    ) {
      if (!isObject(target)) {
        // if (__DEV__) {
        //   console.warn(`value cannot be made reactive: ${String(target)}`)
        // }
        return target
      }
      // 目标已是代理，请返回它。
      // 此处调用会触发getter
      if (
        target[ReactiveFlags.RAW] &&
        !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
      ) {
        return target
      }
      // 目标已具有相应的代理
      // 每个 proxy 都会被保存在 proxyMap
      const existingProxy = proxyMap.get(target)
      if (existingProxy) {
        return existingProxy
      }
    
      function targetTypeMap(rawType: string) {
        switch (rawType) {
          case 'Object':
          case 'Array':
            return TargetType.COMMON
          case 'Map':
          case 'Set':
          case 'WeakMap':
          case 'WeakSet':
            return TargetType.COLLECTION
          default:
            return TargetType.INVALID
        }
      }
      function getTargetType(value: Target) {
        return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
          ? TargetType.INVALID // 0
          // toRawType => Object.prototype.toString.call(value).slice(8,-1)
          : targetTypeMap(toRawType(value)) // 1|2
      }
     
      // 0直接返回target
      const targetType = getTargetType(target)
      if (targetType === TargetType.INVALID) {
        return target
      }
      // 添加代理
      const proxy = new Proxy(
        target,
        // 1=>baseHandlers 2->collectionHandlers
        targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
      )
      // target -> proxy
      proxyMap.set(target, proxy)
      return proxy
    }

• baseHandlers

  • path：packages/reactivity/src/baseHandlers.ts

  export const mutableHandlers: ProxyHandler<object> = {
    get,
    set,
    deleteProperty,
    has,
    ownKeys
  }

  • getter

    const get = createGetter()
    function createGetter(isReadonly = false, shallow = false) {
      return function get(target: Target, key: string | symbol, receiver: object) {
        if (key === ReactiveFlags.IS_REACTIVE) {
          return !isReadonly
        } else if (key === ReactiveFlags.IS_READONLY) {
          return isReadonly
        } else if (
          // 如果key==='__v_raw' && receiver===reactiveMap(也就是上文的proxyMap).get(target)
          key === ReactiveFlags.RAW &&
          receiver ===
            (isReadonly
              ? shallow
                ? shallowReadonlyMap
                : readonlyMap
              : shallow
              ? shallowReactiveMap
              : reactiveMap
            ).get(target)
        ) {
          // 当target[__v_raw]取值时 返回target
          return target
        }
    	// isArray = Array.is
        const targetIsArray = isArray(target)
    	// hasOwn = Object.prototype.hasOwnProperty.call
        // 判断 target是数组，并且调用了数组的方法
        // arrayInstrumentations是 一个对象{[数组方法]:function(){}}
        if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
          return Reflect.get(arrayInstrumentations, key, receiver)
        }
    	
        const res = Reflect.get(target, key, receiver)
    	// isSymbol = typeof val === 'symbol'
        const builtInSymbols = new Set(
          Object.getOwnPropertyNames(Symbol)
            .map(key => (Symbol as any)[key])
            .filter(isSymbol)
        )
        
        if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
          // 如果key是Symbol，则判断key是否是symbol内置属性
          // 否则判断key是否在__proto__,__v_isRef,__isVue属性上
          return res
        }
    
        if (!isReadonly) {
          // 不是制只读
          track(target, TrackOpTypes.GET, key)
        }
    
        if (shallow) {
          return res
        }
    
        if (isRef(res)) {
          // 判断是否被ref修饰过
          // ref展开-不适用于数组+整数键。
          const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
          return shouldUnwrap ? res.value : res
        }
    
        if (isObject(res)) {
          // 将返回值也转换为代理。
          // 我们在这里执行isObject检查以避免无效值警告。
          // 这里还需要延迟访问只读和被动，以避免循环依赖。
          // 返回proxy，并在上方判断该对象是否被代理，如果被代理直接返回改
          return isReadonly ? readonly(res) : reactive(res)
        }
    
        return res
      }
    }

    • arrayInstrumentations：

      function createArrayInstrumentations() {
        const instrumentations: Record<string, Function> = {}
        // instrument identity-sensitive Array methods to account for possible reactive
        // values
        ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
          instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
            const arr = toRaw(this) as any
            for (let i = 0, l = this.length; i < l; i++) {
              track(arr, TrackOpTypes.GET, i + '')
            }
            // 我们首先使用原始参数运行该方法（可能是被动的）
            const res = arr[key](...args)
            if (res === -1 || res === false) {
              // 如果不起作用，请使用原始值再次运行它。
              return arr[key](...args.map(toRaw))
            } else {
              return res
            }
          }
        })
        //避免无限调用
        ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
          instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
            pauseTracking()
            // 触发getter，获取原始值调用对应函数
            const res = (toRaw(this) as any)[key].apply(this, args)
            resetTracking()
            return res
          }
        })
        return instrumentations
      }

• effect：

  • path：packages/reactivity/src/effect.ts

  • track：

    let activeEffect // ReactiveEffect实例
    let trackOpBit = 1
    export function track(target: object, type: TrackOpTypes, key: unknown) {
      if (!isTracking()) {
        // 没有依赖
        // 看到此处 ,如果是单纯的get、set 没有使用effect的话，建议跳过下面部分，直接看set
        return
      }
      // targetMap: target -> depsMap
      let depsMap = targetMap.get(target)
      if (!depsMap) {
        targetMap.set(target, (depsMap = new Map()))
      }
      // depsMap: key -> dep
      let dep = depsMap.get(key)
      const createDep = (effects?: ReactiveEffect[]): Dep => {
        // Set 防止重复
        const dep = new Set<ReactiveEffect>(effects) as Dep
        // 用来标记该属性上次和本次在哪些effect中使用过，再通过对比进行删除和新增。
        dep.w = 0
        dep.n = 0
        return dep
      }
      if (!dep) {
        depsMap.set(key, (dep = createDep()))
      }
    
      const eventInfo = __DEV__
        ? // debugger用，不需要关注
          { effect: activeEffect, target, type, key }
        : undefined
    
      trackEffects(dep, eventInfo)
    }
    export function isTracking() {
      return shouldTrack && activeEffect !== undefined
    }
    
    export function trackEffects(
      dep: Dep,
      debuggerEventExtraInfo?: DebuggerEventExtraInfo
    ) {
      let shouldTrack = false
      // effectTrackDepth: 当前递归跟踪的effect数。 用来记录当前effect是第几层，每当有effect执行就++effectTrackDepth,执行完毕就--effectTrackDepth
    
      // maxMarkerBits=30：按位轨迹标记最多支持30级递归。选择此值是为了使现代JS引擎能够在所有平台上使用SMI。当递归深度更大时，返回到使用完全清理。
    
      if (effectTrackDepth <= maxMarkerBits) {
        // 判断本次是否标记过
        if (!newTracked(dep)) {
          // trackOpBit 可以理解为唯一ID
          dep.n |= trackOpBit // set newly tracked
          // 判断原来是否标记过
          shouldTrack = !wasTracked(dep)
        }
      } else {
        // Full cleanup mode.
        shouldTrack = !dep.has(activeEffect!)
      }
    
      if (shouldTrack) {
        dep.add(activeEffect)
        activeEffect!.deps.push(dep)
          
        if (__DEV__ && activeEffect!.onTrack) {
          activeEffect!.onTrack(
            Object.assign(
              {
                effect: activeEffect!
              },
              debuggerEventExtraInfo
            )
          )
        }
      }
    }

  • effect：

    export function effect<T = any>(
      fn: () => T,
      options?: ReactiveEffectOptions
    ): ReactiveEffectRunner {
      if ((fn as ReactiveEffectRunner).effect) {
        // 拿到原始fn
        fn = (fn as ReactiveEffectRunner).effect.fn
      }
    
      const _effect = new ReactiveEffect(fn)
      if (options) {
        // extend = Object.assign
        extend(_effect, options)
        if (options.scope) recordEffectScope(_effect, options.scope)
      }
      if (!options || !options.lazy) {
    		// 没有lazy参数，立即执行run    
        _effect.run()
      }
      const runner = _effect.run.bind(_effect) as ReactiveEffectRunner
      runner.effect = _effect
      return runner
    }

    • ReactiveEffect

      const effectStack=[]
      class ReactiveEffect {
            constructor(fn, scheduler = null, scope) {
                this.fn = fn;
                this.scheduler = scheduler;
                this.active = true;
                this.deps = [];
              	// effectScope 相关处理逻辑
                recordEffectScope(this, scope);
            }
            run() {
                if (!this.active) {
                  // 没有激活，说明我们调用了effect stop 函数，
                    return this.fn();
                }
                if (!effectStack.includes(this)) {
                    try {
                        effectStack.push((activeEffect = this));
                        enableTracking();
                      	// 根据递归的深度记录位数
                        trackOpBit = 1 << ++effectTrackDepth;
                        if (effectTrackDepth <= maxMarkerBits) {
                        // 给依赖打标记
                            initDepMarkers(this);
                        }
                        else {
                         // 超过 maxMarkerBits 则 trackOpBit 的计算会超过最大整形的位数，
                        // 降级为 cleanupEffect
                            cleanupEffect(this);
                        }
                        return this.fn();
                    }
                    finally {
                      	// fn执行完成之后
                        if (effectTrackDepth <= maxMarkerBits) {
                            // 完成依赖标记
                            finalizeDepMarkers(this);
                        }
                      	// 恢复到上一级
                        trackOpBit = 1 << --effectTrackDepth;
                        resetTracking();
                      	// 出栈
                        effectStack.pop();
                        const n = effectStack.length;
                      	// 指向栈最后一个 effect
                        activeEffect = n > 0 ? effectStack[n - 1] : undefined;
                    }
                }
            }
            stop() {
                if (this.active) {
                    cleanupEffect(this);
                    if (this.onStop) {
                        this.onStop();
                    }
                    this.active = false;
                }
            }
        }
      const initDepMarkers = ({ deps }) => {
            if (deps.length) {
                for (let i = 0; i < deps.length; i++) {
                    deps[i].w |= trackOpBit; // 标记依赖已经被收集
                }
            }
        };

• 例子：

  • 看到这就能捋一下get了

  Vue.createApp({
    setup(){
      const state=reactive({a:1})
      effect(()=>{
        console.log(state.a)
      })
      return {state}
    }
  }).mount('#app')

  • 映射关系
    • proxyMap={target:proxy}、 targetMap={target:depsMap}、depsMap={key:dep}、dep={Set[ReactiveEffect实例],n,w}
  • 流程：
    • reactive：创建proxy，getter中收集依赖，setter中触发effect，
    • effect：创建ReactiveEffect实例，执行run函数，state.a触发getter，触发track，根据target，key找出对应dep，将ReactiveEffect实例添加进dep，ReactiveEffect实例deps数组推入dep
    • 遍历ReactiveEffect.deps，也就是dep，更w，n属性，effectStack出栈，activeEffect指向effectStack栈顶

• Setter

  function createSetter(shallow = false) {
    return function set(
      target: object,
      key: string | symbol,
      value: unknown,
      receiver: object
    ): boolean {
      let oldValue = (target as any)[key]
      if (!shallow && !isReadonly(value)) {
        // 获取新旧真实数据
        value = toRaw(value)
        oldValue = toRaw(oldValue)
        if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
          // 处理ref数据
          oldValue.value = value
          return true
        }
      } else {
        // 在浅层模式下，无论是否是reactive，对象都按原样设置
      }
  	// 判断有效key
      const hadKey =
        isArray(target) && isIntegerKey(key)
          ? Number(key) < target.length
          : hasOwn(target, key)
      const result = Reflect.set(target, key, value, receiver)
      // 如果目标是原型链中的某个东西，则不要触发
      // receiver是proxy实例对象,原值为Proxy {...target}
      // 此时Reflect.set执行过后，receiver变为Proxy {key:value} 
      // proxyMap中相应的target也更改为{key:value} 
      // toRaw获取__v_raw，会触发getter，返回proxyMap.get(target)
      if (target === toRaw(receiver)) {
        if (!hadKey) {
          trigger(target, TriggerOpTypes.ADD, key, value)
        } else if (hasChanged(value, oldValue)) {
          // 对比新旧值是否改变
          // hasChanged = !Object.is
          trigger(target, TriggerOpTypes.SET, key, value, oldValue)
        }
      }
      return result
    }
  }

  • trigger：

    export function trigger(
      target: object,
      type: TriggerOpTypes,
      key?: unknown,
      newValue?: unknown,
      oldValue?: unknown,
      oldTarget?: Map<unknown, unknown> | Set<unknown>
    ) {
      const depsMap = targetMap.get(target)
      if (!depsMap) {
        // 没有被收集
        return
      }
      
      let deps: (Dep | undefined)[] = []
      if (type === TriggerOpTypes.CLEAR) {
        // 正在清除集合
        // 触发target中所有effect
        deps = [...depsMap.values()]
      } else if (key === 'length' && isArray(target)) {
        // 对修改数组length的处理
        depsMap.forEach((dep, key) => {
          if (key === 'length' || key >= (newValue as number)) {
            deps.push(dep)
          }
        })
      } else {
        
        if (key !== void 0) {
          deps.push(depsMap.get(key))
        }
    
        // 在ADD | DELETE | Map.SET 时也运行迭代键
        switch (type) {
          case TriggerOpTypes.ADD:
            if (!isArray(target)) {
              deps.push(depsMap.get(ITERATE_KEY))
              if (isMap(target)) {
                deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
              }
            } else if (isIntegerKey(key)) {
              // new index added to array -> length changes
              deps.push(depsMap.get('length'))
            }
            break
          case TriggerOpTypes.DELETE:
            if (!isArray(target)) {
              deps.push(depsMap.get(ITERATE_KEY))
              if (isMap(target)) {
                deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
              }
            }
            break
          case TriggerOpTypes.SET:
            if (isMap(target)) {
              deps.push(depsMap.get(ITERATE_KEY))
            }
            break
        }
      }
    
      const eventInfo = __DEV__
        ? { target, type, key, newValue, oldValue, oldTarget }
        : undefined
    
      if (deps.length === 1) {
        if (deps[0]) {
          if (__DEV__) {
            triggerEffects(deps[0], eventInfo)
          } else {
            triggerEffects(deps[0])
          }
        }
      } else {
        const effects: ReactiveEffect[] = []
        for (const dep of deps) {
          if (dep) {
            effects.push(...dep)
          }
        }
        if (__DEV__) {
          triggerEffects(createDep(effects), eventInfo)
        } else {
          triggerEffects(createDep(effects))
        }
      }
    }

  • triggerEffects：

    export function triggerEffects(
      dep: Dep | ReactiveEffect[],
      debuggerEventExtraInfo?: DebuggerEventExtraInfo
    ) {
      // spread into array for stabilization
      for (const effect of isArray(dep) ? dep : [...dep]) {
        // effect = ReactiveEffect{}
        // 遍历依赖执行
        if (effect !== activeEffect || effect.allowRecurse) {
          if (__DEV__ && effect.onTrigger) {
            effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
          }
          if (effect.scheduler) {
            effect.scheduler()
          } else {
            effect.run()
          }
        }
      }
    }

[TOC]

immer源码解析

入口

src/immer.ts

// src/immer.ts#L23
const immer = new Immer()
// src/immer.ts#L44
export const produce: IProduce = immer.produce

produce

例子

// produce(baseState, recipe: (draftState) => void): nextState

import produce from "immer"

const baseState = [
    {
        title: "Learn TypeScript",
        done: true
    },
    {
        title: "Try Immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({title: "Tweet about it"})
    draftState[1].done = true
})

produce中对象的更改不会导致原值更改

expect(baseState.length).toBe(2)
expect(nextState.length).toBe(3)

// same for the changed 'done' prop
expect(baseState[1].done).toBe(false)
expect(nextState[1].done).toBe(true)

// unchanged data is structurally shared
expect(nextState[0]).toBe(baseState[0])
// ...but changed data isn't.
expect(nextState[1]).not.toBe(baseState[1])

源码

接下来看源码，看着不长，但是引用的函数较多

export class Immer implements ProducersFns {
  ......
	/**
	 * @param {any} base - the initial state
	 * @param {Function} producer - function that receives a proxy of the base state as first argument and which can be freely modified
	 * @param {Function} patchListener - optional function that will be called with all the patches produced here
	 * @returns {any} a new state, or the initial state if nothing was modified
	 */
  produce: IProduce = (base: any, recipe?: any, patchListener?: any) => {
      // curried invocation
	    // base 和 recipe参数 互换
    	// 上述例子走不到这个判断
      if (typeof base === "function" && typeof recipe !== "function") {
        const defaultBase = recipe
        recipe = base

        const self = this
        return function curriedProduce(
          this: any,
          base = defaultBase,
          ...args: any[]
        ) {
          return self.produce(base, (draft: Drafted) => recipe.call(this, draft, ...args)) // prettier-ignore
        }
      }
			// 错误信息 6: "The first or second argument to `produce` must be a function"
      if (typeof recipe !== "function") die(6)
    	// 错误信息 7: "The third argument to `produce` must be a function or undefined"
      if (patchListener !== undefined && typeof patchListener !== "function")
        die(7)

      let result

      // 判断对象是否是是Draftable
      if (isDraftable(base)) {
        // 生成作用域，一个对象对应一个作用域
        // this是Immer类的实例
        const scope = enterScope(this)
        // 添加proxy代理,这个是重点之一
        const proxy = createProxy(this, base, undefined)
        let hasError = true
        try {
          // 执行回调
          result = recipe(proxy)
          hasError = false
        } finally {
          // finally 而不是 catch + rethrow 更好地保留原始堆栈
          // revokeScope：终止当前scope的所有proxy，将currentScope变量赋值为scope.parent_
          if (hasError) revokeScope(scope)
          else leaveScope(scope)
        }
        if (typeof Promise !== "undefined" && result instanceof Promise) {
          return result.then(
            result => {
              usePatchesInScope(scope, patchListener)
              return processResult(result, scope)
            },
            error => {
              // 同上
              revokeScope(scope)
              throw error
            }
          )
        }
        usePatchesInScope(scope, patchListener)
        return processResult(result, scope)
      } else if (!base || typeof base !== "object") {
        result = recipe(base)
        if (result === undefined) result = base
        if (result === NOTHING) result = undefined
        if (this.autoFreeze_) freeze(result, true)
        if (patchListener) {
          const p: Patch[] = []
          const ip: Patch[] = []
          getPlugin("Patches").generateReplacementPatches_(base, result, p, ip)
          patchListener(p, ip)
        }
        return result
      } else die(21, base)
    }

isDraftable

对类型的判断，没啥注释，一看就懂

export function isDraftable(value: any): boolean {
	if (!value) return false
	return (
		isPlainObject(value) ||
		Array.isArray(value) ||
		!!value[DRAFTABLE] ||
		!!value.constructor[DRAFTABLE] ||
		isMap(value) ||
		isSet(value)
	)
}

• isPlainObject:

  const objectCtorString = Object.prototype.constructor.toString()
  export function isPlainObject(value: any): boolean {
  	if (!value || typeof value !== "object") return false
  	const proto = Object.getPrototypeOf(value)
  	if (proto === null) {
  		return true
  	}
  	const Ctor =
  		Object.hasOwnProperty.call(proto, "constructor") && proto.constructor
  	
  	if (Ctor === Object) return true
  
  	return (
  		typeof Ctor == "function" &&
      // 字符串的比较主要是为了解决不同js环境，例如iframe
  		Function.toString.call(Ctor) === objectCtorString
  	)
  }

• DRAFTABLE:

  export const DRAFTABLE: unique symbol = hasSymbol
  	? Symbol.for("immer-draftable")
  	: ("__$immer_draftable" as any)

• isMap\isSet:

  // hasMap\hasSet 是否有map set的构造函数
  export function isMap(target: any): target is AnyMap {
  	return hasMap && target instanceof Map
  }
  export function isSet(target: any): target is AnySet {
  	return hasSet && target instanceof Set
  }

enterScope

let currentScope: ImmerScope | undefined

export function enterScope(immer: Immer) {
	return (currentScope = createScope(currentScope, immer))
}

function createScope(
	parent_: ImmerScope | undefined,
	immer_: Immer
): ImmerScope {
	return {
    // 保存着每次通过createProxy生成的proxy对象
    // 例1
		drafts_: [],
		parent_,
		immer_,
		// 每当修改后的draft包含来自另一个范围的draft时，我们需要防止自动冻结，以便最终确定无主draft。
		canAutoFreeze_: true,
		unfinalizedDrafts_: 0
	}
}

• 例1

  const obj = {a: {c: 1}, b: 1}
  const produce = immer.produce
  const p2 = produce(a, draft => {
    draft.a.c = 3
  })
  // 此时
  // scope.drafts_=>[Proxy,Proxy]
  // 数组第一项proxy是代理变量obj创建的，第二项是代理obj.a创建的

createProxy

重点之一，为数据添加proxy

src/core/proxy.ts#L50

公共参数和函数

// src/types/types-internal.ts#L20
export const enum Archtype {
	Object,
	Array,
	Map,
	Set
}
// src/types/types-internal.ts#L27
export const enum ProxyType {
	ProxyObject,
	ProxyArray,
	Map,
	Set,
	ES5Object,
	ES5Array
}
// src/utils/common.ts#L160
export function latest(state: ImmerState): any {
  // 优先返回copy_，因为copy_保存的是base更改之后的拷贝
	return state.copy_ || state.base_
}
// src/utils/common.ts#L118
export function has(thing: any, prop: PropertyKey): boolean {
	return getArchtype(thing) === Archtype.Map
  // 区分map
  // 判断是否有这个属性
		? thing.has(prop)
		: Object.prototype.hasOwnProperty.call(thing, prop)
}
// src/utils/common.ts#L101
export function getArchtype(thing: any): Archtype {
	/* istanbul ignore next */
  
  // 如果只是一个plainObject,则state为undefined
	const state: undefined | ImmerState = thing[DRAFT_STATE]
	return state
		? state.type_ > 3
			? state.type_ - 4 // cause Object and Array map back from 4 and 5
			: (state.type_ as any) // others are the same
		: Array.isArray(thing)
		? Archtype.Array
		: isMap(thing)
		? Archtype.Map
		: isSet(thing)
		? Archtype.Set
  	// 例如 如果原数据是对象，最终判断会落在这
		: Archtype.Object
}

源码

export function createProxy<T extends Objectish>(
	immer: Immer,
	value: T,
	parent?: ImmerState
): Drafted<T, ImmerState> {
	// 前提条件：createProxy应该由isDraftable保护，所以我们知道我们可以安全地起草
  // 判断对象的类型，使用不同的方法
	const draft: Drafted = isMap(value)
		? getPlugin("MapSet").proxyMap_(value, parent)
		: isSet(value)
		? getPlugin("MapSet").proxySet_(value, parent)
		// 是否支持proxy
		: immer.useProxies_
		? createProxyProxy(value, parent)
		: getPlugin("ES5").createES5Proxy_(value, parent)

	const scope = parent ? parent.scope_ : getCurrentScope()
	scope.drafts_.push(draft)
	return draft
}

export function getCurrentScope() {
  // 错误信息 0: "Illegal state"
	if (__DEV__ && !currentScope) die(0)
	return currentScope!
}

Object

• createProxyProxy(value, parent)

  export function createProxyProxy<T extends Objectish>(
  	base: T,
  	parent?: ImmerState
  ): Drafted<T, ProxyState> {
  	const isArray = Array.isArray(base)
  	const state: ProxyState = {
      // 类型判断
  		type_: isArray ? ProxyType.ProxyArray : (ProxyType.ProxyObject as any),
  		// 跟踪与哪个produce调用相关联。
  		scope_: parent ? parent.scope_ : getCurrentScope()!,
  		// 对浅层和深层变化都适用。
  		modified_: false,
  		// 在最终确定期间使用。
  		finalized_: false,
  		// 跟踪已赋值 (true) 或删除 (false) 的属性。
  		assigned_: {},
  		// The parent draft state.
  		parent_: parent,
  		// The base state.
  		base_: base,
  		// proxy代理对象
  		draft_: null as any, // set below
  		// base更改值之后的副本
  		copy_: null,
  		// 用来撤销proxy
  		revoke_: null as any,
  		isManual_: false
  	}
  
  	// 并不是以原数据作为proxy的target，而是使用state
  	let target: T = state as any
  	let traps: ProxyHandler<object | Array<any>> = objectTraps
  	if (isArray) {
  		target = [state] as any
  		traps = arrayTraps
  	}
  	// Proxy.revocable()方法可以用来创建一个可撤销的代理对象。
  	const {revoke, proxy} = Proxy.revocable(target, traps)
  	state.draft_ = proxy as any
  	state.revoke_ = revoke
  	return proxy as any
  }
  // src/core/proxy.ts#L241
  function readPropFromProto(state: ImmerState, source: any, prop: PropertyKey) {
    // 获取对应属性描述符
  	const desc = getDescriptorFromProto(source, prop)
    // 返回对应值
  	return desc
  		? `value` in desc
  			? desc.value
  			: // This is a very special case, if the prop is a getter defined by the
  			  // prototype, we should invoke it with the draft as context!
  			  desc.get?.call(state.draft_)
  		: undefined
  }
  // src/core/proxy.ts#L252
  // 遍历原型链，获取对应属性描述符
  function getDescriptorFromProto(
  	source: any,
  	prop: PropertyKey
  ): PropertyDescriptor | undefined {
  	// 'in' checks proto!
  	if (!(prop in source)) return undefined
  	let proto = Object.getPrototypeOf(source)
  	while (proto) {
  		const desc = Object.getOwnPropertyDescriptor(proto, prop)
  		if (desc) return desc
  		proto = Object.getPrototypeOf(proto)
  	}
  	return undefined
  }

• Object：objectTraps

  export const objectTraps: ProxyHandler<ProxyState> = {
  	get(state, prop) {
  		if (prop === DRAFT_STATE) return state
  		// 拿到原数据
  		const source = latest(state)
  		if (!has(source, prop)) {
        // 判断是否有该属性
  			// 如果没有就往原型链上查
  			return readPropFromProto(state, source, prop)
  		}
      // 获取值
  		const value = source[prop]
  		if (state.finalized_ || !isDraftable(value)) {
        // state.finalized_后面讲
        // 如果value不是一个可以被draft的对象，直接返回值
  			return value
  		}
  		// 比较value和base的引用
  		if (value === peek(state.base_, prop)) {
        // state.copy_浅拷贝state,base_
  			prepareCopy(state)
        // 为copy_中对应的props添加proxy
  			return (state.copy_![prop as any] = createProxy(
  				state.scope_.immer_,
  				value,
  				state
  			))
  		}
  		return value
  	},
    // 直接看代码吧，使用最新数据进行判断 
    // ------------ 
  	has(state, prop) {
  		return prop in latest(state)
  	},
  	ownKeys(state) {
  		return Reflect.ownKeys(latest(state))
  	},
    // ------------
  	set(
  		state: ProxyObjectState,
  		prop: string /* 严格来说不是，但有助于TS */,
  		value
  	) {
  		const desc = getDescriptorFromProto(latest(state), prop)
  		if (desc?.set) {
  			// 特殊情况：如果这个写入被 setter 捕获，我们必须用正确的上下文触发它
  			desc.set.call(state.draft_, value)
  			return true
  		}
  		if (!state.modified_) {
  			// 当前state是否经过修改
  			const current = peek(latest(state), prop)
        // 获取state
  			const currentState: ProxyObjectState = current?.[DRAFT_STATE]
        // 特殊情况，如果将原值赋值给draft，可以直接忽略这个赋值
        // 例1
  			if (currentState && currentState.base_ === value) {
  				state.copy_![prop] = value
  				state.assigned_[prop] = false
  				return true
  			}
        // Object.is
        // 值相等 && （value不为undefined 或者 base上有该属性）
        // 需要判断原数据没有prop 和 prop值为undefined的区别
        // 如果原数据上没有prop，current值也会是undefined
  			if (is(value, current) && (value !== undefined || has(state.base_, prop)))
          // 无需更改，可以忽略
  				return true
        // 拷贝
  			prepareCopy(state)
        // 修改当前state.modified_ 以及 parent.modified_ 为 true
  			markChanged(state)
  		}
  
  		if (
        // 排除设置值为自身引用的情况
        // Fixes immerjs/immer#648 https://github.com/immerjs/immer/issues/648
  			state.copy_![prop] === value &&
        // 排除0===-0
  			typeof value !== "number" &&
  			// 特殊情况 处理新的prop值为undefined情况
  			(value !== undefined || prop in state.copy_)
  		)
  			return true
  
  		// @ts-ignore
  		state.copy_![prop] = value
  		state.assigned_[prop] = true
  		return true
  	},
     // delete 操作符的捕捉器
  	deleteProperty(state, prop: string) {
  		// The `undefined` check is a fast path for pre-existing keys.
  		if (peek(state.base_, prop) !== undefined || prop in state.base_) {
  			state.assigned_[prop] = false
  			prepareCopy(state)
  			markChanged(state)
  		} else {
  			// if an originally not assigned property was deleted
  			delete state.assigned_[prop]
  		}
  		// @ts-ignore
  		if (state.copy_) delete state.copy_[prop]
  		return true
  	},
  	// Note: We never coerce `desc.value` into an Immer draft, because we can't make
  	// the same guarantee in ES5 mode.
    // 可拦截 Object.getOwnPropertyDescriptor()、Reflect.getOwnPropertyDescriptor()
  	getOwnPropertyDescriptor(state, prop) {
  		const owner = latest(state)
  		const desc = Reflect.getOwnPropertyDescriptor(owner, prop)
  		if (!desc) return desc
  		return {
  			writable: true,
  			configurable: state.type_ !== ProxyType.ProxyArray || prop !== "length",
  			enumerable: desc.enumerable,
  			value: owner[prop]
  		}
  	},
  	defineProperty() {
  		die(11)
  	},
  	getPrototypeOf(state) {
  		return Object.getPrototypeOf(state.base_)
  	},
  	setPrototypeOf() {
  		die(12)
  	}
  }

  • 例1

    const a = {a: {c: 1}, b: 2}
    const p1 = produce(a, draft => {
      draft.a = a.a
    })

• Array：

Map

Set

processResult

src/core/finalize.ts#L20

重点，将更改之后的结果输出

export function processResult(result: any, scope: ImmerScope) {
	scope.unfinalizedDrafts_ = scope.drafts_.length
  // 基于base生成的proxy，会在scope.drafts_第一项
	const baseDraft = scope.drafts_![0]
	const isReplaced = result !== undefined && result !== baseDraft
	if (!scope.immer_.useProxies_)
		getPlugin("ES5").willFinalizeES5_(scope, result, isReplaced)
	if (isReplaced) {
		if (baseDraft[DRAFT_STATE].modified_) {
			revokeScope(scope)
			die(4)
		}
		if (isDraftable(result)) {
			// Finalize the result in case it contains (or is) a subset of the draft.
			result = finalize(scope, result)
			if (!scope.parent_) maybeFreeze(scope, result)
		}
		if (scope.patches_) {
			getPlugin("Patches").generateReplacementPatches_(
				baseDraft[DRAFT_STATE].base_,
				result,
				scope.patches_,
				scope.inversePatches_!
			)
		}
	} else {
		// 计算最终值
		result = finalize(scope, baseDraft, [])
	}
	revokeScope(scope)
	if (scope.patches_) {
		scope.patchListener_!(scope.patches_, scope.inversePatches_!)
	}
	return result !== NOTHING ? result : undefined
}

finalize

src/core/finalize.ts#L57

function finalize(rootScope: ImmerScope, value: any, path?: PatchPath) {
	// 不要在递归数据结构中递归
  // 判断value是否冻结，兼容ie (Fixes #600)
	if (isFrozen(value)) return value

	const state: ImmerState = value[DRAFT_STATE]
	// 一个普通的对象，可能需要冻结，可能包含draft
	if (!state) {
    // 遍历，根据格式判断分为两种：
    // Object.keys().forEach \ .forEach
		each(
			value,
			(key, childValue) =>
				finalizeProperty(rootScope, state, value, key, childValue, path),
			true // See #590, 不要递归到不可枚举的非draft对象
		)
		return value
	}
	// 永远不要最终确定另一个范围拥有的drafts
	if (state.scope_ !== rootScope) return value
	// 未修改的，返回（冻结的）原值
	if (!state.modified_) {
		maybeFreeze(rootScope, state.base_, true)
		return state.base_
	}
	// 还没有最终确定，现在就开始吧
	if (!state.finalized_) {
		state.finalized_ = true
		state.scope_.unfinalizedDrafts_--
		const result =
			// For ES5, create a good copy from the draft first, with added keys and without deleted keys.
			state.type_ === ProxyType.ES5Object || state.type_ === ProxyType.ES5Array
				? (state.copy_ = shallowCopy(state.draft_))
				: state.copy_
		// Finalize all children of the copy
		// For sets we clone before iterating, otherwise we can get in endless loop due to modifying during iteration, see #628
		// Although the original test case doesn't seem valid anyway, so if this in the way we can turn the next line
		// back to each(result, ....)
		each(
			state.type_ === ProxyType.Set ? new Set(result) : result,
			(key, childValue) =>
				finalizeProperty(rootScope, state, result, key, childValue, path)
		)
		// everything inside is frozen, we can freeze here
		maybeFreeze(rootScope, result, false)
		// first time finalizing, let's create those patches
		if (path && rootScope.patches_) {
			getPlugin("Patches").generatePatches_(
				state,
				path,
				rootScope.patches_,
				rootScope.inversePatches_!
			)
		}
	}
	return state.copy_
}

redux源码解析

尽量用最白的话讲明白~

目录：

• CreateStore.js
• Utils
• ApplyMiddleware.js
• Compose.js
• BindActionCreators.js
• CombineReducers.js

createStore.js

export default function createStore(reducer, preloadedState, enhancer)

暴露createStore函数，返回:

return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

createStore大致有三种使用：

createStore(reducer)
createStore(reducer,applyMiddleware(...middleware))
createStore(reducer，initialState,applyMiddleware(...middleware))

接下来就逐个分析一下~

变量声明和类型判断

if (
    (typeof preloadedState === 'function' && typeof enhancer === 'function') ||
    (typeof enhancer === 'function' && typeof arguments[3] === 'function')
  ) {...}

  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {...}
    // 这里的 enhancer 是 applyMiddleware(...) 执行后的高阶函数
    return enhancer(createStore)(reducer, preloadedState)
  }

  if (typeof reducer !== 'function') {...}

  let currentReducer = reducer //当前的reducer
  let currentState = preloadedState// 拿到当前 State
  let currentListeners = [] // 初始化 listeners 用于放置监听函数，用于保存快照供当前 dispatch 使用
  let nextListeners = currentListeners //引用传值 指向当前 listeners，在需要修改时复制出来修改为下次快照存储数据，不影响当前订阅
  let isDispatching = false// 用于标记是否正在进行 dispatch，用于控制 dispatch 依次调用不冲突

  /**
   * 这是currentListeners的浅拷贝，所以我们可以使用nextListeners作为调度时的临时列表。
   * 这样可以防止消费者在dispatch过程中 订阅/取消订阅 调用时出现任何错误
   */
  //在一段时间内始终没有新的订阅或取消订阅的情况下，nextListeners 与 currentListeners 可以共用内存
  // 确保可以改变 nextListeners。没有新的listener 可以始终用同一个引用
  function ensureCanMutateNextListeners() {
    // 需要写入新的监听之前调用，如果是指向同一个地址的话，就把nextListeners复制出来
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

类型判断，除了排除特定的type之外，还有另外一个目的就是，满足参数灵活。

getState

获取当前的state，没什么好说的

function getState() {
    if (isDispatching) {
      throw new Error(
        'You may not call store.getState() while the reducer is executing. ' +
          'The reducer has already received the state as an argument. ' +
          'Pass it down from the top reducer instead of reading it from the store.'
          /**
           * 在Reducer执行时不能调用store.getState()
           * reducer已收到state作为参数。
           * 从顶端reducer往下递送，而不是从店里读出。
           */
      )
    }
    return currentState
  }

subscribe

向监听列表中添加监听函数，返回值为取消监听函数

如果在调用dispatch时订阅或取消订阅，则不会对当前正在进行的dispatch产生任何影响。但是，下一个dispatch调用（无论是否嵌套）将使用订阅列表的最新快照。

function subscribe(listener) {
    if (typeof listener !== 'function') {...}
    if (isDispatching) {...}

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) { //防止多次触发
        return
      }

      if (isDispatching) {
        throw new Error(
          //在Reducer正在执行时，您不能取消对存储侦听器的订阅
          'You may not unsubscribe from a store listener while the reducer is executing. ' +
            'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
        )
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1) //去除队列中相对应的listener
      currentListeners = null 
    }
  }

1. 判断传入的listener是否是function，否则报错
2. 判断dispatch状态，true则报错，在reducer中不能调用。
3. 声明一个变量用来判断是否订阅，防止该订阅函数多次取消订阅
4. ensureCanMutateNextListeners(),判断当前监听队列是否和临时监听队列是否相同引用，如果相同则通过slice复制出来一份，赋值给nextListeners，此举为了不混淆当前的监听队列。
5. 将监听函数添加到临时的监听队列——nextListeners，（下文会讲）在dispatch的时候将临时监听队列同步到当前监听队列并触发。
6. unsubscribe依旧触发ensureCanMutateNextListeners,然后找到对应的listener(在subscribe函数时形成闭包)在数组中的index,删除。
7. currentListeners = null（较老的版本没有这句） 这句没太搞懂为什么这么写，有大佬明白的麻烦给说下，谢了~

dispatch

执行reducer之后获取最新的state，并且依次执行监听队列函数

function dispatch(action) {
    if (!isPlainObject(action)) {...}
    if (typeof action.type === 'undefined') {...}
    if (isDispatching) {...}
    try {
      isDispatching = true
      currentState = currentReducer(currentState, action) //currentReducer 传入的reducer
    } finally {
      isDispatching = false
    }

   /**
    * 更新最新的监听对象，相当于：
      currentListeners = nextListeners
      const listeners = currentListeners
      如果再次触发订阅，则会执行ensureCanMutateNextListeners(),然后再次把nextListeners复制出来，添加监听
    */
    const listeners = (currentListeners = nextListeners) //在生成了currentState之后遍历当前的监听列表，逐个执行
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action //返回当前action
  }

1. 判断是否是一个扁平对象
2. 判断type是否为undefined，是则报错
3. 判断是否正在dispatch，是则报错
4. 设置当前派发状态为true，通过reducer处理之后或者 最新的state

监听：

将nextListeners直接赋值给currentListeners，统一当前的监听列表，然后遍历执行监听函数

replaceReducer

替换reducer

function replaceReducer(nextReducer) { //替换reducer的同时会dipatch`@@redux/REPLACE${randomString()}`
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }

    currentReducer = nextReducer

    /**
     * 此操作与ActionTypes.INIT具有相似的效果。
     * 新旧rootReducer中存在的任何Reducer都将收到以前的状态。这将使用旧状态树中的任何相关数据有效地填充新状态树。
     */
    dispatch({ type: ActionTypes.REPLACE }) //初始化state
  }

将reducer替换之后，dispatch一下，更新state。一般不会用到

observable

目前没见过有用这个的...

function observable() {
    const outerSubscribe = subscribe //创建一个外部的订阅函数
    return {
      /**
       * 最小观察者订阅方法。
       * @param {object} 可用作观察者的任何对象。
       * 观察者对象应该有一个`next`方法
       * @returns {Subscription} 具有`unsubscribe`方法的对象，
       * 该方法可用于从存储中取消订阅可观察对象，并防止观察对象进一步发送值。
       * 
       */
      subscribe(observer) {
        if (typeof observer !== 'object' || observer === null) {
          throw new TypeError('Expected the observer to be an object.')
        }

        function observeState() { //如果传入的observer对象有next函数，就执行next()并将当前state放入函数中
          if (observer.next) {
            observer.next(getState())
          }
        }

        observeState()
        const unsubscribe = outerSubscribe(observeState) //给当前监听的数组加上observeState函数
        return { unsubscribe }
      },
      /**
       * Redux 内部没有用到这个方法，在测试代码 redux/test/createStore.spec.js 中有出现。
       * https://github.com/benlesh/symbol-observable
       */
      [$$observable]() {
        return this
      }
    }
  }

这部分用到了一个包symbol-observable感兴趣的可以去看下

最后dispatch({ type: ActionTypes.INIT })

创建存储时，将dispatch 'INIT'，以便每个reducer返回其初始状态。这有效地填充了初始state tree。

1. 讲解一下HTTPS的工作原理

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。握手过程的简单描述如下：

• 浏览器将自己支持的一套加密规则发送给网站。

• 网站从中选出一组加密算法与HASH算法，并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。

• 获得网站证书之后浏览器要做以下工作：

  • a) 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一致等），如果证书受信任，则浏览器栏里面会显示一个小锁头，否则会给出证书不受信的提示。
  • 如果证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。
  • 使用约定好的HASH计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有信息发送给网站。

• 4.网站接收浏览器发来的数据之后要做以下的操作：

  • a) 使用自己的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。
  • b) 使用密码加密一段握手消息，发送给浏览器。

• 5.浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。

  原文地址

  ---

2. 如何遍历一个dom树

function traversal(node) {
    //对node的处理
    if (node && node.nodeType === 1) {
        console.log(node.tagName);
    }
    var i = 0,
        childNodes = node.childNodes,
        item;
    for (; i < childNodes.length; i++) {
        item = childNodes[i];
        if (item.nodeType === 1) {
            //递归先序遍历子节点
            traversal(item);
        }
    }
}

原文地址

3. new操作符都做了什么

1、 创建一个空对象，并且 this 变量引用该对象，// lat target = {};

2、继承了函数的原型。// target.proto = func.prototype;

3、属性和方法被加入到 this 引用的对象中。并执行了该函数func// func.call(target);

4、新创建的对象由 this 所引用，并且最后隐式的返回 this 。// 如果func.call(target)返回的res是个对象或者function 就返回它

function new(func) {
	let target = {};
	target.__proto__ = func.prototype;
	let res = func.call(target);
	if (res && typeof(res) == "object" || typeof(res) == "function") {
		return res;
	}
	return target;
}

原文地址

4. 前端如何进行seo优化

• 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标
• 前后端分离的项目使用服务端同构渲染，既提高了访问速度，同时重要关键内容首次渲染不通过 js 输出
• 友情链接，好的友情链接可以快速的提高你的网站权重
• 外链，高质量的外链，会给你的网站提高源源不断的权重提升
• 向各大搜索引擎登陆入口提交尚未收录站点

原文地址

5. 前后端分离的项目如何seo

• 使用prerender。但是回答prerender，面试官肯定会问你，如果不用prerender，让你直接去实现，好的，请看下面的第二个答案。
• 先去 https://www.baidu.com/robots.txt 找出常见的爬虫，然后在nginx上判断来访问页面用户的User-Agent是否是爬虫，如果是爬虫，就用nginx方向代理到我们自己用nodejs + puppeteer实现的爬虫服务器上，然后用你的爬虫服务器爬自己的前后端分离的前端项目页面，增加扒页面的接收延时，保证异步渲染的接口数据返回，最后得到了页面的数据，返还给来访问的爬虫即可。

补充：

@xianshannan ：

引用下知乎上别人的回答

那么我们首先得了解Search Engine才能谈如何做到让页面被收录，这里就拿最常见的百度和google来举例吧。

百度是不支持收录SPA的页面的，而且SPA的网站对于百度的spider来说等于是只有1个页面，那么如何做到让这种搜索引擎收录页面呢？

首先我们可以自行提交sitemap，让蜘蛛主动去爬，但是遇到sitemap中的URL，到达指定页面后页面只有一段js怎么办，我们可以利用比如标签来进行最简单的优化，比如在noscript里打印出当前页面一些关键的信息点，但是这个做法大家一看就非常的蠢，因为正常用户并不需要这些内容，占用下载量，而且不好维护。

那么我们如何判断当前页面是否支持运行javascript呢？

前端已做到，用noscript，后端不行，那么只好针对百度的spider做UA判断了，这也就是大家常见的一些解决方案，使用phantomjs或者nginx代理，来对spider访问的页面进行特殊的处理，达到被收录的效果。那么这么做其实是有一些副作用的，比如你收录的页面和用户正常访问的页面差别较大是有被搜索引擎K掉的风险的，

所以更多的做法还是选择首屏使用ssr的方式渲染，先通过后端路由保证页面的主要信息可以被服务器端输出，然后其他的功能，包括用户之后的路由跳转控制，再使用前端路由来做，曾经的项目经验在新浪博客手机版中也是这么做的，当然当时没有ssr，是后端直接渲染的模板，用户访问后，再进行交互则再采用前后端分离和前端路由控制来完成。

然后就是google的搜索引擎，是支持hashtag再rewrite访问你的静态版的，但是毕竟只有google支持，所以正规的做法都是使用pushState来对页面URL做前端的后续无刷新控制，对爬虫和所有用户提供任何入口的ssr或者首屏的直接渲染，才是最完美的SEO支持方案。
本人也比较认同 ssr 的处理方式，当然 ssr 的成本相对高。

原文地址

6. 讲解一下https对称加密和非对称加密。

对称加密： 发送方和接收方需要持有同一把密钥，发送消息和接收消息均使用该密钥。相对于非对称加密，对称加密具有更高的加解密速度，但双方都需要事先知道密钥，密钥在传输过程中可能会被窃取，因此安全性没有非对称加密高。

非对称加密： 接收方在发送消息前需要事先生成公钥和私钥，然后将公钥发送给发送方。发送放收到公钥后，将待发送数据用公钥加密，发送给接收方。接收到收到数据后，用私钥解密。 在这个过程中，公钥负责加密，私钥负责解密，数据在传输过程中即使被截获，攻击者由于没有私钥，因此也无法破解。 非对称加密算法的加解密速度低于对称加密算法，但是安全性更高。

几个名词要理清

• RSA：非对称加密
• AES：对称加密 生成一个随机字符串key 只有客户端和服务端有 他们两个通过这个key对数据加密和传输跟解密 这一个统称对称加密
• CA：权威认证机构 服务器在建站的时候 去CA认证机构认证 得到对应的数字签名 相当于身份证号 客户端每次安装浏览器的时候 都会下载最新的CA列表 这个列表有对应的数字签名和服务器IP一一对应的列表 这就是为什么我们自己搭建的localhost没法发https的原因 因为没法进行CA认证
• 数字证书：包含了数字签名跟RSA公钥
• 数字签名：保证数字证书一定是服务器传给客户端的 相当于服务器的身份证ID
• 对称密钥： 对数据进行加密的key
• 非对称密钥： （k1， k2） k1加密的数据 只有k2能解开 k1位非对称公钥 k2为非对称私钥
• 非对称公钥：RSA公钥 k1加密的数据 只有k2能解开
• 非对称私钥：RSA私钥 k1加密的数据 只有k2能解开

原文地址

安装 React、 React-dom 类型定义文件

yarn add @types/react

yarn add @types/react-dom

有状态组件开发

定义state：

interface IProps {
  color: string,
  size?: string,
}
interface IState {
  count: number,
}
class App extends React.PureComponent<IProps, IState> {
  readonly state: Readonly<IState> = {
    count: 1,
  }
  render () {
    return (
      <div>Hello world</div>
    )
  }
  componentDidMount () {
    this.state.count = 2
  }
}
export default App

无状态组件开发

在 React 的声明文件中 已经定义了一个 SFC 类型，使用这个类型可以避免我们重复定义 children、 propTypes、 contextTypes、 defaultProps、displayName 的类型。

使用 SFC 进行无状态组件开发。

import { SFC } from 'react'
import { MouseEvent } from 'react'
import * as React from 'react'
interface IProps {
  onClick (event: MouseEvent<HTMLDivElement>): void,
}
const Button: SFC<IProps> = ({onClick, children}) => {
  return (
    <div onClick={onClick}>
      { children }
    </div>
  )
}
export default Button

事件处理

大家可以想到直接把 event 设置为 any 类型，但是这样就失去了我们对代码进行静态检查的意义。

function handleEvent(event: any) { console.log(event.clientY) }

试想下当我们注册一个 Touch 事件，当我们通过 event.clientY 访问时就有问题了，因为 Touch 事件的 event 对象并没有 clientY 这个属性。

Event 事件对象类型

常用 Event 事件对象类型：

• ClipboardEvent<T = Element> 剪贴板事件对象
• DragEvent<T = Element> 拖拽事件对象
• ChangeEvent<T = Element> Change 事件对象
• KeyboardEvent<T = Element> 键盘事件对象
• MouseEvent<T = Element> 鼠标事件对象
• TouchEvent<T = Element> 触摸事件对象
• WheelEvent<T = Element> 滚轮事件对象
• AnimationEvent<T = Element> 动画事件对象
• TransitionEvent<T = Element> 过渡事件对象

import { MouseEvent } from 'react’ 
interface IProps { 
    onClick (event: MouseEvent<HTMLDivElement>): void, 
}

Promise 类型

Promise 是一个泛型类型，T 泛型变量用于确定使用 then 方法时接收的第一个回调函数（onfulfilled）的参数类型。

interface IResponse<T> {
  message: string,
  result: T,
  success: boolean,
}
async function getResponse (): Promise<IResponse<number[]>> {
  return {
    message: '获取成功',
    result: [1, 2, 3],
    success: true,
  }
}
getResponse()
  .then(response => {
    console.log(response.result)
  })

工具泛型使用技巧

typeof

一般我们都是先定义类型，再去赋值使用，但是使用 typeof 我们可以把使用顺序倒过来。

const options = {
  a: 1
}
type Options = typeof options

使用 **Partial **将所有的 props 属性都变为可选值

type Partial<T> = { [P in keyof T]?: T[P] };

上面代码的意思是 keyof T 拿到 T 所有属性名, 然后 in 进行遍历, 将值赋给 P , 最后 T[P]取得相应属性的值，中间的 ? 用来进行设置为可选值。

如果 props 所有的属性值都是可选的我们可以借助 Partial 这样实现。

(keyof 是索引类型查询操作符。假设T是一个类型，那么keyof T产生的类型是T的属性名称字符串字面量类型构成的联合类型。)

import { MouseEvent } from 'react'
import * as React from 'react'
interface IProps {
  color: 'red' | 'blue' | 'yellow',
  onClick (event: MouseEvent<HTMLDivElement>): void,
}
const Button: SFC<Partial<IProps>> = ({onClick, children, color}) => {
  return (
    <div onClick={onClick}>
      { children }
    </div>
  )

条件类型

TypeScript2.8引入了条件类型，条件类型可以根据其他类型的特性做出类型的判断。

T extends U ? X : Y

原先

interface Id { id: number, /* other fields */ }
interface Name { name: string, /* other fields */ }
declare function createLabel(id: number): Id;
declare function createLabel(name: string): Name;
declare function createLabel(name: string | number): Id | Name;

使用条件类型之后

type IdOrName<T extends number | string> = T extends number ? Id : Name;
declare function createLabel<T extends number | string>(idOrName: T): T extends number ? Id : Name;

通过传入的类型判断，如果T是number 那么就为Id，否则为Name

Exclude<T,U>

从 T 中排除那些可以赋值给 U 的类型。

type Exclude<T, U> = T extends U ? never : T;

实例：

type T = Exclude<1|2|3|4|5, 3|4> // T = 1|2|5

此时 T 类型的值只可以为 1 、2 、 5 ，当使用其他值时 TS 会进行错误提示。

Error:(8, 5) TS2322: Type '3' is not assignable to type '1 | 2 | 5’.

Extract<T,U>

从 T 中提取那些可以赋值给 U 的类型。

type Extract<T, U> = T extends U ? T : never;

type T = Extract<1|2|3|4|5, 3|4> // T = 3|4

此时T类型的值只可以为 3 、4 ，当使用其他值时 TS 会进行错误提示：

Error:(8, 5) TS2322: Type '5' is not assignable to type '3 | 4'.

Pick<T,K>

从 T 中取出一系列 K 的属性。

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

假如我们现在有一个类型其拥有 name 、 age 、 sex 属性，当我们想生成一个新的类型只支持 name 、age 时可以像下面这样：

interface Person {
  name: string,
  age: number,
  sex: string,
}
let person: Pick<Person, 'name' | 'age'> = {
  name: '小王',
  age: 21,
}

Record<K,T>

将 K 中所有的属性的值转化为 T 类型。

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

};

将 name 、 age 属性全部设为 string 类型。

let person: Record<'name' | 'age', string> = {
  name: '小王',
  age: '12',
}

Omit<T,K>（没有内置）

从对象 T 中排除 key 是 K 的属性。

由于 TS 中没有内置，所以需要我们使用 Pick 和 Exclude 进行实现。

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

排除 name 属性。

interface Person {
  name: string,
  age: number,
  sex: string,
}

let person: Omit<Person, 'name'> = {
  age: 1,
  sex: '男'
}

NonNullable

排除 T 为 null 、undefined。

type NonNullable<T> = T extends null | undefined ? never : T;

type T = NonNullable<string | string[] | null | undefined>;

ReturnType

获取函数 T 返回值的类型。。

type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

infer R 相当于声明一个变量，接收传入函数的返回值类型。

type T1 = ReturnType<() => string>; // string 

type T2 = ReturnType<(s: string) => void>; // void 

async/await 实现原理

• yield/generator

  • yield* 后面可跟String\Array\Generator可迭代的对象

  function* foo() {
    yield* [1, 2];
    yield* "12";
    yield* [
      function* () {
        yield 1;
      },
      function* () {
        yield 2;
      },
    ];
  }
  const f=foo()
  console.log(g.next());//{value: 1, done: false}
  console.log(g.next());//{value: 2, done: false}
  console.log(g.next());//{value: "1", done: false}
  console.log(g.next());//{value: "2", done: false}
  console.log(g.next());//{value: ƒ*, done: false}
  console.log(g.next());//{value: ƒ*, done: false}
  console.log(g.next());//{value: undefined, done: true}

  • yield 后面跟generator 并不会执行generator函数

• 现有写法

  const f1=async ()=>{
      console.log('f1')
      const data=await f2()
      console.log('data',data)
  }
  const f2=async ()=>{
      return await 'f2'
  }

• babel之后

  "use strict";
  
  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key,arg) {
    try {
      // 执行next
      var info = gen[key](arg);
      var value = info.value;
    } catch (error) {
      reject(error);
      return;
    }
    if (info.done) {
  		// 更改promise状态
      resolve(value);
    } else {
      // 如果value是一个promise，会在执行promise改变状态之后执行_next/_throw
      Promise.resolve(value).then(_next, _throw);
    }
  }
  
  function _asyncToGenerator(fn) {
    return function () {
      // 保存this和参数
      var self = this,
        args = arguments;
      return new Promise(function (resolve, reject) {
        var gen = fn.apply(self, args);
        function _next(value) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw,"next",value);
        }
        function _throw(err) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
        }
        // 每次执行前先执行一次next
        _next(undefined);
      });
    };
  }
  
  const f1 = /*#__PURE__*/ (function () {
    // f1的函数体被变成generator函数并被_asyncToGenerator包裹
    var _ref = _asyncToGenerator(function* () {
      console.log("f1");
      // await被编译成yield
      const data = yield f2();
      console.log("data",data); // f2
    });
  
    return function f1() {
      // 保证this指向正确
      return _ref.apply(this,arguments);
    };
  })();
  
  const f2 = /*#__PURE__*/ (function () {
    var _ref2 = _asyncToGenerator(function* () {
      return yield "f2";
    });
  
    return function f2() {
      return _ref2.apply(this,arguments);
    };
  })();
  f1();

• _asyncToGenerator返回一个函数执行后，返回一个promise是为了在done=false时时候，被Promise.resolve包裹（上文执行到yield f2()时，f1的value为f2返回的promise），从而等待异步操作完成之后再执行next

重构

基于《重构2》一书中的**

前部分为概念叙述，可直接跳过看例子

何为重构

• 重构（名词）：对软件内部结构的一种调整，目的是在不改变软件可观察行为的前提下，提高其可理解性，降低其修改成本
• 重构（动词）：使用一系列重构手法，在不改变软件可观察行为的前提下，调整其结构

用户侧关注的行为不应改变

为何重构

• 重构改进软件设计
• 重构使软件更容易理解
• 重构帮助我们找到bug
• 重构提高变成速度

总之，重构可以帮助我们更好的掌握代码，而不是一味的完成某些事情（功能）

何时重构

三次法则：第一次做某件事的时候只管去做；第二次做类似的事情就会反感，但也能接受；第三次再做类似的事情时，你就应该重构

事不过三，三则重构

——《重构2》

• 重构使之后添加新功能更加容易
• 使代码更易懂
• 捡垃圾式重构
  • 如果已经理解代码在做什么，但它做的不够好，或者冗杂，但目前有另外一个任务等待完成。这时是一个取舍。如果每次经过这段代码时，重构它，将它变得稍微好一点，积少成多，这些垃圾总会被清理完
• code review时的重构
• 如果一段代码不需要理解流程功能，并不需要重构它

具体的重构点

命名

通常合适的命名要比写代码更难 [滑稽]

• 命名是变成中最难的两件事之一，但是相反改名是最常用的重构手法之一
• 函数改名、变量改名、字段改名等
• 良好的命名能够让开发者一目了然，不用花费大把时间在猜谜语上

重复代码

这个不用很常见，不过多赘述

过长的函数

据我们的经验，活的最长、最好的程序，其中的函数都比较短

——《重构2》

• 函数越长越难理解，在早期的变成语言中，子程序调用需要额外的开销。但是现代编程语言几乎完全免除了进程内的函数调用开销。
• 但是小函数会使阅读上有些负担，因为需要切换频繁上下文。好在现在的开发环境都可以点击函数名快速跳转到对应函数声明处
• 当你需要写注释来说明些什么的时候，我们就要把需要说明的东西写在函数里
• 条件表达式和循环通常也是提炼的信号，例如对于一个庞大的switch语句，每个分支应该对应着一个独立的函数

过长的参数列表

• 如果发现函数的参数正在从现有的数据抽出很多数据项，不如直接传入原来的数据结果
• 如果有几项参数总是同时出现，可以传入一个对象，将参数合并为一个
• 使用类可以有效的缩短参数列表

全局变量

• 可以被修改的全局变量非常邪恶👻，因为它的全局作用域可以使它被任何地方修改
• 所以有效的拆分全局变量，变为局部变量，尽量控制其作用域，只允许当前的模块使用

可变数据

• 对于数据的修改经常导致出乎意料的结果和难以发现的bug
• 如果要更新一个数据结构，就要返回一份新的数据副本（不可变数据），使其更容易监控和推进。

例子——提炼函数（Extract Function）

将一个函数内部拆分成多个功能模块（函数），简洁兼并语义化

function printOwing(invoice) {
  let outstanding = 0;
  printBanner();
  // calculate outstanding
  for (const o of invoice.orders) {
    outstanding += o.amount;
  }
  // record due date
  const today = Clock.today;
  invoice.dueDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 30
  );
  //print details
  console.log(`name: ${invoice.customer}`);
  console.log(`amount: ${outstanding}`);
  console.log(`due : ${invoice.dueDate.toLocaleDatestring()}`);
}

• 可以看到函数被分成了三部分：循环计算、修改属性、log
• 那么首先将log部分提炼为带两个参数的函数，同时注意函数名的语义化
• 第二步，如果局部变量（invoice）是一个数据结构，然而代码中又有修改这个数据结构的部分，所以可以将其提炼出来为一个函数
• 第三步，移动局部变量变量（outstanding），将初始化变量和使用变量的地方两者靠近。如果这个局部变量不止在一处使用，则将使用变量的逻辑提炼为一个函数，并且返回出变量
• 修改之后的代码如下

function printOwing(invoice) {
  printBanner()
  let outstanding=calculateOutstanding(invoice)
  recordDueDate(invoice)
	pringDetails(invoice,outstanding)
}
// ...小函数省略

• 也可将calculateOutstanding(invoice)作为参数，即：

  pringDetails(invoice,calculateOutstanding(invoice))

  • 前提是 calculateOutstanding内用到的invoice参数不会因为代码位置的变化而变化
  • 并且其他地方不会用到这个函数的返回值（recordDueDate）

例子——内联函数（Inline Function）

与提炼函数恰恰相反，将一个提炼出的函数再拆开放回原函数

function getRating(driver){
  return moreThanFiveLateDeliveries(driver)? 2 : 1
}
function moreThanFiveLateDeliveries(driver){
  return driver.numberOfLateDeliveries > 5
}

• 如果将moreThanFiveLateDeliveries内部的代码放回getRating中同样清晰已读，那么应该去掉这个函数。
• 但如果moreThanFiveLateDeliveries内部代码是递归调用、多返回点、内联之后出现局部变量无法访问等复杂情况，内联函数这种重构手法并不适合。
• 上述列子这种非必要的间接性函数，duck不必

总结

从目前例子来看，**可以总结为：为了更好的语义化，为了更好的间接性，为了更好的一目了然，

这章主要大概讲解重构的**，当然重构还有更多种的方法，包括封装。

未完待续

参考资料

《重构2》[美]马丁.福勒(Martin Fowler)

bind

• function-bind.js

  module.exports = Function.bind || function bind(that /* , ...args */) {
    // 判断是否是一个函数
    var F = aCallable(this);
    var Prototype = F.prototype;
    // 拿到除that之外的函数
    var partArgs = arraySlice(arguments, 1);
    // 返回的函数
    var boundFunction = function bound(/* args... */) {
      // 拼接参数
      var args = concat(partArgs, arraySlice(arguments));
      // 重点！！
      // 判断this是否是boundFunction的实例
      // 函数bind之后的函数再new出一个实例，这个实例其实是通过，原函数new出的实例，并不会更改this指向
      return this instanceof boundFunction ? construct(F, args.length, args) : F.apply(that, args);
    };
    // 继承this函数的原型
    if (isObject(Prototype)) boundFunction.prototype = Prototype;
    return boundFunction;
  };

  var construct = function (C, argsLength, args) {
    if (!hasOwn(factories, argsLength)) {
      for (var list = [], i = 0; i < argsLength; i++) list[i] = 'a[' + i + ']';
      // 通过Function创建函数
      // 创建出的函数为
      // ƒ anonymous(C,a
      // ) {
      // return new C(a[0],a[1])
      // }
      factories[argsLength] = Function('C,a', 'return new C(' + join(list, ',') + ')');
    } return factories[argsLength](C, args);
  };

• 例子

  function a(){}
  function b(){}
  const c=a._bind(b)
  const d=new c('a','c','d')

  • d为a函数bind之后的函数new出的实例对象

  • construct函数返回出的函数为

    ƒ anonymous(C,a) {
      // C是通过boundFunction闭包保存的例子中的a函数
      return new C(a[0],a[1],a[2])
    }

class实现原理

几乎支持所有浏览器都支持class写法

• 例子1

  class A{
    constructor(){
    	this.a=1
    }
    static state={}
    static fnStatic(){}
    props={a:1}
    props={a:2}
  	m2=()=>{}
  	fn(){}
  }

• 编译后：

  "use strict";
  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      // 执行检测
      // 如果直接A()调用报错
      throw new TypeError("Cannot call a class as a function");
    }
  }
  
  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  
  function _createClass(Constructor, protoProps, staticProps) {
    // 类函数，绑定在prototype上
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    // 静态函数绑定在自身上
    if (staticProps) _defineProperties(Constructor, staticProps);
    // 将prototype更改为只读
    Object.defineProperty(Constructor, "prototype", { writable: false });
    return Constructor;
  }
  
  function _defineProperty(obj, key, value) {
    if (key in obj) {
      // 如果key已存在就重置，更改修饰符
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true,
      });
    } else {
      obj[key] = value;
    }
    return obj;
  }
  
  var A = /*#__PURE__*/ (function () {
    function A() {
      _classCallCheck(this, A);
      // 在new的时候会执行这部分代码
      _defineProperty(this, "props", {
        a: 1,
      });
      _defineProperty(this, "props", {
        a: 2,
      });
      _defineProperty(this, "m2", function () {});
      this.a = 1;
    }
    // 绑定属性
    _createClass(
      A,
      [
        {
          key: "fn",
          value: function fn() {},
        },
      ],
      [
        {
          key: "fnStatic",
          value: function fnStatic() {},
        },
      ]
    );
  
    return A;
  })();
  // 静态属性，挂在自身
  _defineProperty(A, "state", {});

• 例子2

  class B extends A {
    constructor() {
      super();
      this.props=1
    }
  }

  • 编译后(省略上文A编译后代码)

    "use strict";
    
    function _typeof(obj) {
      "@babel/helpers - typeof";
      return (
        (_typeof =
          "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
            ? function (obj) {
                return typeof obj;
              }
            : function (obj) {
                return obj &&
                  "function" == typeof Symbol &&
                  obj.constructor === Symbol &&
                  obj !== Symbol.prototype
                  ? "symbol"
                  : typeof obj;
              }),
        _typeof(obj)
      );
    }
    
    function _inherits(subClass, superClass) {
      if (typeof superClass !== "function" && superClass !== null) {
        // 函数类型判断
        throw new TypeError("Super expression must either be null or a function");
      }
      Object.defineProperty(subClass, "prototype", {
        // 构建subClass.prototype，已superClass.prototype为__proto__
        // 也就是 subClass.prototype.__proto__ ==={
    		//        ...superClass.prototype,
        // 				constructor:subClass
      	// }
        value: Object.create(superClass && superClass.prototype, {
          constructor: { value: subClass, writable: true, configurable: true }
        }),
        writable: false
      });
      // subClass.__proto__ === superClass
      // 继承静态属性
      if (superClass) _setPrototypeOf(subClass, superClass);
    }
    
    function _setPrototypeOf(o, p) {
      _setPrototypeOf =
        Object.setPrototypeOf ||
        function _setPrototypeOf(o, p) {
          o.__proto__ = p;
          return o;
        };
      return _setPrototypeOf(o, p);
    }
    
    function _createSuper(Derived) {
      var hasNativeReflectConstruct = _isNativeReflectConstruct();
      return function _createSuperInternal() {
        // 拿到B的__proto__
        // 注意 这时的__proto__就是function A(){}
        var Super = _getPrototypeOf(Derived),
          result;
        if (hasNativeReflectConstruct) {
          // 这里的this指向的是B实例
          // NewTarget = function B(){}
          var NewTarget = _getPrototypeOf(this).constructor;
          // 相当于
          // var result = Object.create(NewTarget.prototype);===>> result.__proto__ = NewTarget.prototype
          // Super.apply(result, arguments);
          // 在B实例上挂在属性
          result = Reflect.construct(Super, arguments, NewTarget);
          // 这样调用保证new.target不丢失
        } else {
          // 如果不支持Reflect就.apply执行
          result = Super.apply(this, arguments);
        }
        return _possibleConstructorReturn(this, result);
      };
    }
    
    function _possibleConstructorReturn(self, call) {
      // 构造函数可能返回的值
      // 类似new一个实例对象，当构造函数中返回对象或者函数，则这个实例是值为返回值
      if (call && (_typeof(call) === "object" || typeof call === "function")) {
        return call;
      } else if (call !== void 0) {
        // void 0 = undefined 前提是undefined值未被更改
        throw new TypeError(
          "Derived constructors may only return object or undefined"
        );
      }
      return _assertThisInitialized(self);
    }
    
    function _assertThisInitialized(self) {
      // 在super前调用this
      if (self === void 0) {
        throw new ReferenceError(
          "this hasn't been initialised - super() hasn't been called"
        );
      }
      return self;
    }
    
    function _isNativeReflectConstruct() {
      // 检测Reflect是否可用
      if (typeof Reflect === "undefined" || !Reflect.construct) return false;
      if (Reflect.construct.sham) return false;
      if (typeof Proxy === "function") return true;
      try {
      // Reflect.construct() 方法的行为有点像 new 操作符 构造函数 ， 相当于运行 new target(...args).
        Boolean.prototype.valueOf.call(
          Reflect.construct(Boolean, [], function () {})
        );
        return true;
      } catch (e) {
        return false;
      }
    }
    
    function _getPrototypeOf(o) {
      _getPrototypeOf = Object.setPrototypeOf
        ? Object.getPrototypeOf
        : function _getPrototypeOf(o) {
            return o.__proto__ || Object.getPrototypeOf(o);
          };
      return _getPrototypeOf(o);
    }
    
    // ..... 忽略部分上文重复代码
    
    var A = /*#__PURE__*/ (function () {
      function A() {
        _classCallCheck(this, A);
    
        _defineProperty(this, "props", {
          a: 1
        });
    
        _defineProperty(this, "props", {
          a: 2
        });
    
        this.a = 1;
      }
    
      // ..... 忽略部分上文重复代码
    })();
    
    _defineProperty(A, "state", {});
    
    var B = /*#__PURE__*/ (function (_A) {
      // 处理原型链
      _inherits(B, _A);
      var _super = _createSuper(B);
    
      function B() {
        var _this;
        _classCallCheck(this, B);
        // 执行父类构造函数并且将父类this上的属性挂载在上面
    		_this = _super.call(this);
        _this.props = 2;
        // _this.__proto__===B.prototype
        // _this.__proto__.__proto__===A.prototype
        return _this;
      }
    
      return _createClass(B);
    })(A);
    new B()

  • super这个位置能引出另一个问题，看下面的例子

• 例子3：

  class B extends A{
  	constructor(){
      this.props=2
      super()
    }
    
  }
  new B()

  • 编译后：

    ...
    
    var B = /*#__PURE__*/ (function (_A) {
      _inherits(B, _A);
    
      var _super = _createSuper(B);
    
      function B() {
        var _this;
    
        _classCallCheck(this, B);
        // 重点在这
        // 因为this在super前调用，所以this还未初始化，此时为undefined
        // 执行报错
        _this.props = 2;
        return (_this = _super.call(this));
      }
    
      return _createClass(B);
    })(A);

• 例子4

  class B extends A{
    constructor(){
      console.log(this)
    }
  }
  new B()

  • 编译后

    var B = /*#__PURE__*/ (function (_A) {
      _inherits(B, _A);
    
      var _super = _createSuper(B);
    
      function B() {
        var _this;
    
        _classCallCheck(this, B);
    		// 此时_assertThisInitialized执行直接报错
        console.log(_assertThisInitialized(_this));
        return _possibleConstructorReturn(_this);
      }
    
      return _createClass(B);
    })(A);