首頁猿問 vue...

vue methods中的函數(shù)是如何強(qiáng)制綁定到vue實(shí)例中的

蝴蝶不菲 2018-07-14 16:15:08

問題：vue methods中的函數(shù)是如何強(qiáng)制綁定到vue實(shí)例中的？var obj = { eventHandle: function (){ // this指向window console.log(this); } };window.addEventListener("resize", obj.eventHandle, false);var obj = { eventHandle: function (){ // this指向window console.log(this); }.bind(obj) };window.addEventListener("resize", obj.eventHandle, false);var vm = new Vue({ el: "#app", methods: { eventHandle: function (){ console.log(this); } }, mounted(){ /* // this指向當(dāng)前vue實(shí)例 window.addEventListener("resize", this.eventHandle.bind(this), false); */ /* this指向當(dāng)前vue實(shí)例。很奇怪為什么這樣給window綁定事件，事件執(zhí)行函數(shù)的this還是指向當(dāng)前vue實(shí)例 */ window.addEventListener("resize", this.eventHandle, false); } });

查看完整描述

2 回答

aluckdog

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個(gè)贊

你要注意的是，你這個(gè)方法是寫在了vue實(shí)例當(dāng)中的，那么this指向的怎么會(huì)不是vue實(shí)例呢，如果不是指向vue實(shí)例，那么根本訪問不了 menthods屬性下面的eventhandle方法了

反對(duì) 回復(fù) 2018-07-19

夢(mèng)里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊

給你貼一段源碼，可以看出vue里面的方法都被bind強(qiáng)制綁定了this上下文，如果你對(duì)bind也不了解，可以自己搜索下

function nativeBind(fn, ctx) {    return fn.bind(ctx)
}
var bind = Function.prototype.bind ? nativeBind : polyfillBind;function initMethods(vm, methods) {    //...
    for(var key in methods) {
        {            
            //一系列錯(cuò)誤檢查...
        }
        vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
    }
}

所以window.addEventListener("resize", this.eventHandle, false);中this.eventHandle中的this沒有指向window，而是指向了vm實(shí)例

反對(duì) 回復(fù) 2018-07-19