Vue 源码阅读（七） bind

Miracle 发布于2019-08-23 12:28 / 659人阅读

摘要：起源通过实现代码代码执行后，缩放浏览器，此时弹窗显示。不符合预期代码分析按常理，绑定事件后，将会丢失所指向的上下文，所以第一个代码执行的结果是。源码分析可以看到在实例上绑定的方法，都是被处理过的。

起源 通过 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源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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