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实例