一、vue編譯模塊

（1）模塊域中導(dǎo)出對(duì)象域

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

A.function定義函數(shù)

I、模塊導(dǎo)出對(duì)象的各關(guān)鍵字的屬性值

如data的值

export default {props:['propA'},data:function() {//經(jīng)Vue轉(zhuǎn)換，該函數(shù)屬于Vue的data賦值函數(shù)let c= this.propA; return {c:c,msg: this.propA, //經(jīng)Vue轉(zhuǎn)換，msg屬于Vue實(shí)例的屬性func:function(){ //經(jīng)Vue轉(zhuǎn)換，該函數(shù)屬于Vue實(shí)例的函數(shù)return this.propA;}};} };

此處的this都是Vue的實(shí)例

?

II、模塊導(dǎo)出對(duì)象的屬性的子屬性

export default {props:['propA'},data:function() {return {msg:{ //經(jīng)Vue轉(zhuǎn)換，msg屬于Vue實(shí)例的屬性propA：'zzzz',func:function(){return this.propA; //func是msg的成員方法}}};} };

此處的this都是return的對(duì)象

?

III、函數(shù)中定義函數(shù)

export default {props:['propA'},data:function() {return {msg:{ //經(jīng)Vue轉(zhuǎn)換，msg屬于Vue實(shí)例的屬性propA：'zzzz',func:function(){;(function(){alert(this.propA) //匿名函數(shù)})();}}};} };

此處的this為undefined；由于匿名函數(shù)不屬于定義對(duì)象所有，又在編譯的模塊中，造成window對(duì)象被屏蔽，故為undefined

?

B.lamda表達(dá)式

export default {props:['propA'},data:()=>{ //經(jīng)Vue轉(zhuǎn)換，該函數(shù)屬于Vue的data賦值函數(shù)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)經(jīng)webpack編譯，將this轉(zhuǎn)換為_(kāi)this(此名有沖突會(huì)變化)，而_this正為webpack模塊的導(dǎo)出對(duì)象__webpack_exports__

(3)經(jīng)Vue轉(zhuǎn)換，該函數(shù)屬于Vue實(shí)例的函數(shù)，故this指向Vue的實(shí)例

(5)中function定義沒(méi)有改變this，this指向other的對(duì)象

lamda表達(dá)式函數(shù)作用域的this都是當(dāng)前聲明函數(shù)作用域的this

?

（2）模塊域中非導(dǎo)出對(duì)象域

<script> export default {data() {return {msg: ''};} }; //模塊域非導(dǎo)出對(duì)象的域 </script>

A、沒(méi)有聲明作用域

<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();，結(jié)果調(diào)用的this全是undefined

II、(3)處插入let c=window.b();，結(jié)果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();，調(diào)用結(jié)果的this全是undefined

II、(3)處插入let c=window.b();，調(diào)用結(jié)果的this，第一個(gè)為window，其他的是undefined

?

二、Vue非編譯模塊

與vue編譯模塊類(lèi)似，不同的是：

（1）function定義函數(shù)

vue編譯模塊的this的值為undefined，在vue非編譯模塊中全為window

（2）lamda表達(dá)式

lamda表達(dá)式中的this為父級(jí)的this，其中頂級(jí)的this為window

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

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的Vue的this的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。