How functions in vue methods are forced to bind to vue instances

question how are functions in: vue methods forced to bind to an vue instance? 

var obj = {
    eventHandle: function (){
        // thiswindow
        console.log(this);
    }
};
window.addEventListener("resize", obj.eventHandle, false);
< hr > 
var obj = {
    eventHandle: function (){
        // thiswindow
        console.log(this);
    }.bind(obj)
};
window.addEventListener("resize", obj.eventHandle, false);
< hr > 
var vm = new Vue({
    el: "-sharpapp",
    methods: {
        eventHandle: function (){
            console.log(this);
        }
    },
    mounted(){
        /*
            // thisvue
            window.addEventListener("resize", this.eventHandle.bind(this), false);
         */
        
        /* thisvuewindow
        thisvue */
        window.addEventListener("resize", this.eventHandle, false);
        
    }
});
Vue.js
Mar.28,2021

if you post a piece of source code, you can see that all the methods in vue are forced to bind to the this context by bind. If you don't know anything about bind, you can search

yourself. 
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);
    }
}

so the this in this.eventHandle in window.addEventListener ("resize", this.eventHandle, false); ) points not to window, but to vm instance

this is contextual

you should note that your method is written in the vue instance, so how can this not point to the vue instance? if it is not pointing to the vue instance, it is impossible to access the eventhandle method under the menthods attribute at all

.

Previous: IDEA maven compilation run: the main class com.nan.web.ControllerApplication could not be found or could not be loaded

Next: Mysql Aliyun RDS and ECS self-built library test master-slave Synchronize

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu