Vue 源碼閱讀（七） bind

Miracle 發布于2019-08-23 12:28 / 693人閱讀

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

起源 通過 Class 實現代碼

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

  resize() {
    alert(this.num)
  }

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

new Demo()

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

符合預期！！

通過 Vue 實現的代碼

import Vue from "vue"

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

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

不符合預期！！

代碼分析

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

因此猜想，在 Vue 的實現版本中，綁定是一定不是定義在 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 的實例調用的方法，是經過 bind 后帶有上下文的新方法。

云服務器 GPU云服務器源碼閱讀 webrtc源碼閱讀 hbase源碼閱讀如何閱讀java源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98580.html

axios源碼閱讀（一）

摘要：開始研究核心代碼這個類首先是構造函數看完上面的內容大家應該有點印象，上掛了和，是默認的配置，顧名思義就是攔截器，目測包含了和兩種類型。喜歡就點個贊吧參考文章源代碼重點難點分析源代碼重點難點分析 axios是一個基于promise的http庫，支持瀏覽器和node端，最近我在做beauty-we的api設計，研讀一個成熟的http庫勢在必行，axios功能完整、api簡潔、注釋清晰，再適...

k00baa 2019-08-22 18:26 評論0 收藏0
snabbdom源碼解析（七）事件處理

摘要：這種解決方式也是相當優雅，值得學習源碼解析系列源碼解析一準備工作源碼解析二函數源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址事件處理我們在使用 vue 的時候，相信你一定也會對事件的處理比較感興趣。我們通過 @click 的時候，到底是發生了什么呢！雖然我們用 @click綁定在模板上，不過事件嚴格綁定在 vnode 上的。 event...

Kross 2019-08-23 14:18 評論0 收藏0
React 源碼深度解讀（七）：事務 - Part 1

摘要：在學習源碼的過程中，給我幫助最大的就是這個系列文章，于是決定基于這個系列文章談一下自己的理解。說明就算拋出了錯誤，部分的代碼也要繼續執行，隨后再將錯誤往上層代碼拋。和都能保證其中一個成員拋出錯誤的時候，余下的能繼續執行。前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀...

KavenFan 2019-08-23 12:45 評論0 收藏0
迷你版Vue--學習如何造一個Vue輪子

摘要：項目地址和的區別其實和最大的區別就是多了一個虛擬，其他的區別都是很小的。項目地址 Vue1和Vue2的區別其實Vue1和Vue2最大的區別就是Vue2多了一個虛擬DOM，其他的區別都是很小的。所以理解了Vue1的源碼，就相當于理解了Vue2，中間差了一個虛擬DOM的Diff算法文檔數據雙向綁定 Vue主流程走向組件 nextTick異步更新 MVVM 先來科普一下MVVM...

isLishude 2019-08-23 14:17 評論0 收藏0
筆記：Vue數據響應式綁定原理—觀源碼

摘要：沒有具體對應源碼分析，只是閱讀源碼的筆記，等之后學好點再寫成文章，構造生成的。帶指令的所有元素，通過獲取，涉及，返回屬性選擇器對里的進行綁定處理節點提取所有，返回數組，元素是對象，包含。沒有具體對應源碼分析，只是閱讀源碼的筆記，等之后學好點再寫成文章 Vue self，構造生成的this。 root根元素。 els帶指令的所有元素，通過querySelectorAll獲取，涉及ge...

Chiclaim 2019-08-20 15:21 評論0 收藏0