VUE data内 THIS 各种情况

Posted 2021-02-10 bin-purelife

var vm = new Vue({
        /* 在方法中，this 表示该方法所属的对象。
        如果单独使用，this 表示全局对象。
        在函数中，this 表示全局对象。
        在函数中，在严格模式下，this 是未定义的(undefined)。
        在事件中，this 表示接收事件的元素。
        类似 call() 和 apply() 方法可以将 this 引用到任何对象。
        */
        data: { 
            b: () => {
                console.log(this); 
                //window 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。没有 this、super、arguments 和 new.target 绑定。
                return function(){
                   return "";
                }
            },
            c: function(){
                console.log(this) //vue 在方法中，this 表示该方法所属的对象。
                return function(){
                    console.log(this) //window  回调方法写再一个回调方法内，回调方法本身不属于对象，所以this为全局得window
                    return "";     
                }
            },
            d : { a : this}, //window  如果单独使用，this 表示全局对象。
            e : {a :{ a: function(){
                console.log(this)  //observer 在方法中，this 表示该方法所属的对象。
                return ‘‘;
            }}},
            f : {a : function(){
                console.log(this) //observer 在方法中，this 表示该方法所属的对象。
                return ‘‘;
            }},
        }
    })