国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Vue原理】Methods - 源碼版

luoyibu / 422人閱讀

摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版今天我們解讀的源碼，其實(shí)

寫文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Methods - 源碼版

今天我們解讀 methods 的源碼，其實(shí) methods 挺簡單的，所以就不打算出白話版了，但是 methods 里面讓我重新認(rèn)識(shí)到這一個(gè)重要的知識(shí)點(diǎn)，是我是我，可能你們已經(jīng)掌握了哈哈

methods 怎么使用實(shí)例訪問？

methods 簡單到什么程度呢，估計(jì)你用腳都能想得到

那么現(xiàn)在的問題怎么解答

"遍歷 methods 這個(gè)對(duì)象，然后逐個(gè)復(fù)制到 實(shí)例上？"

沒錯(cuò)，你猜對(duì)了，的確是逐個(gè)復(fù)制，簡化源碼是這么寫的

function initMethods(vm, methods) {    
    for (var key in methods) {
        vm[key] = 
            methods[key] == null ? 
            noop : 
            bind(methods[key], vm);
    }
}
methods 如何固定作用域的

其實(shí) methods 的固定作用域的唯一重點(diǎn)就是 bind 了，bind 相信大家也都用過

bind 是固定函數(shù)作用域的，說實(shí)在的，之前我還真不太用 bind 這個(gè)東西，就知道可以綁定作用域，我覺得我會(huì) call 和 apply 就行了，現(xiàn)在后悔了，發(fā)現(xiàn)用處太大了

調(diào)用 bind 會(huì) 返回 綁定作用域的函數(shù)，而這個(gè)函數(shù)直接執(zhí)行時(shí)，作用域就已經(jīng)是固定了的

不像 call 和 apply 這種一次性綁定作用域的 妖艷賤貨不同，這個(gè)貨一次綁定，終身受益啊

Vue 使用了 bind 去綁定 methods 方法，顯然是為了避免有些刁民會(huì)錯(cuò)誤調(diào)用而報(bào)錯(cuò)，索性直接固定作用域，而且考慮到 bind 有的瀏覽器不支持

于是寫了一個(gè)兼容方法，意思大概是這樣

1、bind 函數(shù)需要傳入作用域 context 和 函數(shù) A

2、然后 閉包保存 這個(gè) context，返回一個(gè)新函數(shù) B

3、B 執(zhí)行的時(shí)候，使用 call 方法 直接綁定 函數(shù)A 的作用域?yàn)?閉包保存的 context

下面是 Vue bind 兼容的源碼，我建議大家把這個(gè)方法保存下來，尤大的東西，還不瞬間保存？？

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 之后，對(duì)我們有什么好處？

我們調(diào)用 實(shí)例的方法，不再每次都使用 實(shí)例去調(diào)用了

這樣子，有什么好處呢，當(dāng)多次調(diào)用方法的話，使用局部變量保存之后，直接訪問局部變量可以減少作用域鏈的檢索

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

        // 本來是這樣，多次使用實(shí)例調(diào)用
        this.test() 
        this.test()    
       
        // 現(xiàn)在局部變量保存，這是優(yōu)化點(diǎn)
        var test = this.test
        test()
        test()
    }
}

bind 綁定作用域強(qiáng)到無法改變

舉栗子

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 執(zhí)行打印下面的結(jié)果

盡管使用 d 調(diào)用，作用域仍然是 b，簡直不要太強(qiáng)啊

講到這里，methods 的精髓，就是 bind 了，很有用哦，這個(gè)東西，大家務(wù)必要記住

總結(jié)

1、methods 會(huì)逐個(gè)復(fù)制到 實(shí)例上

2、methods 方法會(huì)使用 bind 綁定實(shí)例作用域，確保作用域不被修改

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105113.html

相關(guān)文章

  • 【Vue原理】Event - 源碼版 之 綁定組件自定義事件

    摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之綁定組件自定義事件組件 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

    amuqiao 評(píng)論0 收藏0

  • 【Vue原理】Mixins - 源碼版

    寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】Mixins - 源碼版 今天探索的是 mixins 的源碼，mixins 根據(jù)不同的選項(xiàng)類型會(huì)做不同的處理 篇幅會(huì)有些長，...

    gotham 評(píng)論0 收藏0

  • 【Vue原理】代理 Data - 源碼版

    摘要：最后完全不會(huì)影響不影響依賴更新賦值，觸發(fā)代理設(shè)置的，就會(huì)直接賦值給總部，從而觸發(fā)設(shè)置的，這個(gè)，用來依賴更新。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】代理 D...

    ralap 評(píng)論0 收藏0

  • 【Vue原理】Props - 源碼版

    寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會(huì)隨著時(shí)間慢慢忘記的。 幸好我做...

    light 評(píng)論0 收藏0

  • 【Vue原理】Mixin - 白話版

    摘要：而我覺得現(xiàn)在出一個(gè)白話版，是讓大家有興趣去研究源碼的時(shí)候，可以提前理清一下思路。相當(dāng)于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內(nèi)部的工作原理。而這個(gè)不會(huì)合并，直接替換掉整個(gè)選項(xiàng) 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版...

    CollinPeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<