vue methods中的函数是如何强制绑定到vue实例中的

Question

问题：vue methods中的函数是如何强制绑定到vue实例中的？

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指向当前vue实例
            window.addEventListener("resize", this.eventHandle.bind(this), false);
         */
        
        /* this指向当前vue实例。很奇怪为什么这样给window绑定事件，
        事件执行函数的this还是指向当前vue实例 */
        window.addEventListener("resize", this.eventHandle, false);
        
    }
});




Answer 1

你要注意的是，你这个方法是写在了vue实例当中的，那么this指向的怎么会不是vue实例呢，如果不是指向vue实例，那么根本访问不了 menthods属性下面的eventhandle方法了

Answer 2

给你贴一段源码，可以看出vue里面的方法都被bind强制绑定了this上下文，如果你对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) {         {                         //一系列错误检查...         }         vm[key] = methods[key] == null ? noop : bind(methods[key], vm);     } }所以window.addEventListener("resize", this.eventHandle, false);中this.eventHandle中的this没有指向window，而是指向了vm实例