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

問(wèn)題：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);
        
    }
});

回答

編輯回答

背叛者

this是有上下文的

2018年7月25日 09:33

編輯回答

不舍棄

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

2017年1月18日 13:07

編輯回答

陌南塵

給你貼一段源碼，可以看出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沒(méi)有指向window，而是指向了vm實(shí)例

2017年2月20日 10:43