【Vue原理】Methods - 源码版

写文章不容易,点个赞呗兄弟
专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Methods - 源码版

今天我们解读 methods 的源码,其实 methods 挺简单的,所以就不打算出白话版了,但是 methods 里面让我重新认识到这一个重要的知识点,是我是我,可能你们已经掌握了哈哈

在这里插入图片描述

methods 怎么使用实例访问?

methods 简单到什么程度呢,估计你用脚都能想得到

那么现在的问题怎么解答

"遍历 methods 这个对象,然后逐个复制到 实例上?"

没错,你猜对了,的确是逐个复制,简化源码是这么写的

function initMethods(vm, methods) {    
    for (var key in methods) {
        vm[key] = 
            methods[key] == null ? 
            noop : 
            bind(methods[key], vm);
    }
}

methods 如何固定作用域的

其实 methods 的固定作用域的唯一重点就是 bind 了,bind 相信大家也都用过

bind 是固定函数作用域的,说实在的,之前我还真不太用 bind 这个东西,就知道可以绑定作用域,我觉得我会 call 和 apply 就行了,现在后悔了,发现用处太大了

调用 bind 会 返回 绑定作用域的函数,而这个函数直接执行时,作用域就已经是固定了的

不像 call 和 apply 这种一次性绑定作用域的 妖艳贱货不同,这个货一次绑定,终身受益啊

Vue 使用了 bind 去绑定 methods 方法,显然是为了避免有些刁民会错误调用而报错,索性直接固定作用域,而且考虑到 bind 有的浏览器不支持

于是写了一个兼容方法,意思大概是这样

1、bind 函数需要传入作用域 context 和 函数 A

2、然后 闭包保存 这个 context,返回一个新函数 B

3、B 执行的时候,使用 call 方法 直接绑定 函数A 的作用域为 闭包保存的 context

下面是 Vue bind 兼容的源码,我建议大家把这个方法保存下来,尤大的东西,还不瞬间保存??

function polyfillBind(fn, ctx) {    
    function boundFn(a) {        
        var 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, ctx) {    
    return fn.bind(ctx)

}

var bind = Function.prototype.bind ?
    nativeBind :
    polyfillBind;

Vue 使用 bind 之后,对我们有什么好处?

我们调用 实例的方法,不再每次都使用 实例去调用了

这样子,有什么好处呢,当多次调用方法的话,使用局部变量保存之后,直接访问局部变量可以减少作用域链的检索

methods:{
    test(){},
    getName(){        

        // 本来是这样,多次使用实例调用
        this.test() 
        this.test()    
       
        // 现在局部变量保存,这是优化点
        var test = this.test
        test()
        test()
    }
}

bind 绑定作用域强到无法改变

在这里插入图片描述

举栗子

function a(){    
    console.log(this)
}

var b={ name:1 }
var c = a.bind(b)
var d={
    c:c,    
    woqu:3434333
}
c()
d.c()

c 和 d.c 执行打印下面的结果
在这里插入图片描述
尽管使用 d 调用,作用域仍然是 b,简直不要太强啊

讲到这里,methods 的精髓,就是 bind 了,很有用哦,这个东西,大家务必要记住
在这里插入图片描述

总结

1、methods 会逐个复制到 实例上

2、methods 方法会使用 bind 绑定实例作用域,确保作用域不被修改

公众号


Vue源码研究会
专注 Vue 源码分享,为了方便大家理解,分为了白话版和 源码版,白话版可以轻松理解工作原理和设计思想...

不会认输

232 声望
104 粉丝
0 条评论
推荐阅读
【Vue原理】Vue源码阅读总结大会 - 终
写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 【2.5.17】

神仙朱4阅读 1.3k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木147阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy45阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木64阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图

不会认输

232 声望
104 粉丝
宣传栏