Vue的this

一、vue编译模块

（1）模块域中导出对象域

export default {
    data() {
        return {
            msg: ''
        };
    }
};

A.function定义函数

I、模块导出对象的各关键字的属性值

如data的值

export default {
    props:['propA'},
    data:function() {//经Vue转换，该函数属于Vue的data赋值函数
        let c= this.propA;   
        return {
            c:c,
            msg: this.propA,     //经Vue转换，msg属于Vue实例的属性
            func:function(){     //经Vue转换，该函数属于Vue实例的函数
                 return this.propA;
            }
        };
    }
};

此处的this都是Vue的实例

II、模块导出对象的属性的子属性

export default {
    props:['propA'},
    data:function() {
        return {
            msg:{     //经Vue转换，msg属于Vue实例的属性
                propA：'zzzz',
                func:function(){
                   
                     return this.propA;   //func是msg的成员方法
                }
            }
        };
    }
};

此处的this都是return的对象

III、函数中定义函数

export default {
 props:['propA'},
    data:function() {
        return {
            msg:{     //经Vue转换，msg属于Vue实例的属性
                propA：'zzzz',
                func:function(){
                     ;(function(){
                          alert(this.propA)  //匿名函数
                     })();
                  
                }
            }
        };
    }
};

此处的this为 undefined；由于匿名函数不属于定义对象所有，又在编译的模块中，造成window对象被屏蔽，故为undefined

B.lamda表达式

export default {
    props:['propA'},
    data:()=>{    //经Vue转换，该函数属于Vue的data赋值函数
        let c= this.propA;   //(1)

        return {
            c:c,
            msg: this.propA,     //(2)
            func:function(){     
                 return this.propA;//(3)
            },
            func1:()=>{     
                 return this.propA;//(4)
            },
            other:{
                propA:'xzxz',
                func2:function(){     
                     return this.propA;//(5)
                },
                func3:()=>{     
                     return this.propA;//(6)
                }
            };
        };
    }
};

(1)、(2)、(4)、(6)经webpack编译，将this转换为_this(此名有冲突会变化)，而_this正为webpack模块的导出对象__webpack_exports__

(3)经Vue转换，该函数属于Vue实例的函数，故this指向Vue的实例

(5)中function定义没有改变this，this指向other的对象

lamda表达式函数作用域的this都是其父级的this

（2）模块域中非导出对象域

<script>
export default {
    data() {
        return {
            msg: ''
        };
    }
};
//模块域非导出对象的域
</script>

A、没有声明作用域

<script>
export default {
    
};

let b = function () {
    var ccc=b;
    var u = [this];
    try {
        this.a = 2;
    } catch (e) {
        u.push(e);
    }
    let c = function () {
        var u = [this];
        try {
            this.a = 3;
        } catch (e) {
            u.push(e);
        }
        let d = function () {
            var u = [this];
            try {
                this.a = 4;
            } catch (e) {
                u.push(e);
            }
            return u
        }
        return [u, d()]
    }
    return [u].concat(c());
}
//(3)
</script>

(3)处插入let c=b();，结果调用的this全是undefined

B、有声明作用域

<script>
export default {
    
};

window.b = function () {
    var ccc=b;
    var u = [this];
    try {
        this.a = 2;
    } catch (e) {
        u.push(e);
    }
    let c = function () {
        var u = [this];
        try {
            this.a = 3;
        } catch (e) {
            u.push(e);
        }
        let d = function () {
            var u = [this];
            try {
                this.a = 4;
            } catch (e) {
                u.push(e);
            }
            return u
        }
        return [u, d()]
    }
    return [u].concat(c());
}
//(3)
</script>

I、(3)处插入let c=b();，调用结果的this全是undefined

II、(3)处插入let c=window.b();，调用结果的this，第一个为window，其他的是undefined

二、Vue非编译模块

与vue编译模块类似，不同的是：

（1）function定义函数

vue编译模块的this的值为undefined，在vue非编译模块中全为window

（2）lamda表达式

lamda表达式中的this为父级的this，其中顶级的this为window

define(function () {
 
	var template =`<div>aaa</div>`;
	let component = {
	    template: template,
	    data:()=>{
		let that=this;//window
		return {
		  
		};
	    }
	};
	
	return component;
});