一、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>

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

II、(3)处插入let c=window.b();，结果window.b为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;//windowreturn {};}};return component;
});