Vue 源碼閱讀（七） bind

Miracle 發(fā)布于2019-08-23 12:28 / 686人閱讀

摘要：起源通過實現(xiàn)代碼代碼執(zhí)行后，縮放瀏覽器，此時彈窗顯示。不符合預(yù)期代碼分析按常理，綁定事件后，將會丟失所指向的上下文，所以第一個代碼執(zhí)行的結(jié)果是。源碼分析可以看到在實例上綁定的方法，都是被處理過的。

起源 通過 Class 實現(xiàn)代碼

class Demo {
  constructor() {
    this.num = 1
    this.init()
  }

  resize() {
    alert(this.num)
  }

  init() {
    window.addEventListener("resize", this.resize)
  }
}

new Demo()

代碼執(zhí)行后，縮放瀏覽器，此時彈窗顯示 undefined。

符合預(yù)期！！

通過 Vue 實現(xiàn)的代碼

import Vue from "vue"

new Vue({
  template: "",
  data: {
    num: 1
  },
  methods: {
    resize() {
      alert(this.num)
    }
  },
  mounted() {
    window.addEventListener("resize", this.resize)
  }
}).$mount("#app")

縮放瀏覽器，此時彈框顯示 1。

不符合預(yù)期！！

代碼分析

按常理，綁定事件 this.resize 后，將會丟失 this 所指向的上下文，所以第一個代碼執(zhí)行的結(jié)果是 undefined。

因此猜想，在 Vue 的實現(xiàn)版本中，綁定是一定不是定義在 methods 下的 resize 方法。

源碼分析

src/core/instance/state.js#L258

function initMethods (vm: Component, methods: Object) {
  const props = vm.$options.props
  for (const key in methods) {
    // ...
    vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
  }
}

可以看到在 Vue 實例上綁定的方法，都是被 bind 處理過的。

src/shared/util.js#L203

function polyfillBind (fn: Function, ctx: Object): Function {
  function boundFn (a) {
    const l = arguments.length
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }

  boundFn._length = fn.length
  return boundFn
}

function nativeBind (fn: Function, ctx: Object): Function {
  return fn.bind(ctx)
}

export const bind = Function.prototype.bind
  ? nativeBind
  : polyfillBind

由此可見， Vue 的實例調(diào)用的方法，是經(jīng)過 bind 后帶有上下文的新方法。