typescript中this報(bào)錯(cuò)的解決
typescript中this報(bào)錯(cuò)
export class AppComponent { title = 'myapp'; count=1; clickme=function(){ this.count++; }
在上述代碼中
使用this報(bào)錯(cuò): 'this' implicitly has type 'any' because it does not have a type annotation.
function處報(bào)錯(cuò): An outer value of 'this' is shadowed by this container
出錯(cuò)原因
ts 提供類似C# 和 java的靜態(tài)類型(強(qiáng)類型), 在全局和命名空間的全局里面 直接聲明一個(gè)函數(shù)要用到 function 關(guān)鍵字(就是js的function關(guān)鍵字),
而在類(class)里面卻不能使用function來(lái)聲明方法。
這其中是this的指向問(wèn)題。
改成這樣就可以了
export class AppComponent { title = 'myapp'; count=1; clickme=()=>{ this.count++; } }
typescript中this的使用注意
最近的一個(gè)項(xiàng)目,用了 typescript 來(lái)寫js腳本,結(jié)果錯(cuò)誤百出,修復(fù)的同時(shí)也讓我總結(jié)了ts 中該怎樣使用this。
ts 提供類似C# 和 java的靜態(tài)類型(強(qiáng)類型), 在全局和命名空間的全局里面 直接聲明一個(gè)函數(shù) 要用到 function 關(guān)鍵字(就是js的function關(guān)鍵字),而在類(class)里面卻不能使用function來(lái)聲明方法。
讓我們來(lái)比較 它與 C# 的不同
? ? public delegate int handle(); ? ? public class Program ? ? { ? ? ? ? public static void Main(string[] args) ? ? ? ? { ? ? ? ? ? ? var t = new Test(); ? ? ? ? ? ? var a = new A(); ? ? ? ? ? ? t.h = a.hander; ? ? ? ? ? ? t.count = t.h(); ? ? ? ? ? ? Console.WriteLine("count is:{0}",t.count);? ? ? ? ? ? ? // output: ? ? ? ? ? ? // count is:1 ? ? ? ? } ? ? } ? ? public class Test ? ? { ? ? ? ? public handle h; ? ? ? ? public int count = 100; ? ? } ? ? public class A ? ? { ? ? ? ? private int count = 0; ? ? ? ? public int hander() ? ? ? ? { ? ? ? ? ? ? this.count +=1; ? ? ? ? ? ? return this.count; ? ? ? ? } ? ? }
這個(gè)代碼在class A里面 放了一個(gè)方法,并將這個(gè)方法作為一個(gè)委托 給了 class program 的 h 字段, 最后在 Main 方法里面運(yùn)個(gè) h委托, 結(jié)果得到了 1 這個(gè)結(jié)果(A.count + 1 = 0 + 1 = 1)
讓我們?cè)赥ypeScript 里面實(shí)現(xiàn)相同的功能:
class A { ? ? public count: number = 0; ? ? public hander(): number { ? ? ? ? this.count += 1; ? ? ? ? return this.count; ? ? } } class Test { ? ? public count: number = 100; ? ? public h: () => number; } class Program { ? ? static Main(): void { ? ? ? ? let t = new Test(); ? ? ? ? let a = new A(); ? ? ? ? t.h = a.hander; ? ? ? ? t.count = t.h(); ? ? ? ? console.log(`count is :${t.count}`); ? ? ? ? // output ? ? ? ? // count is :101 ? ? } } Program.Main();// 為了跟C#一致 , 提供的靜態(tài)入口
你會(huì)發(fā)現(xiàn),這時(shí)候結(jié)果不再是1,而是101, 造成差異的原因是js的 this 指針 , 在 C# 中 this 總是指向當(dāng)前的類,而 js中的this可以改變, 當(dāng) t.h = a.hander 的時(shí)候 t.h 中的this 變成了 Test 類。 而在 typescript中,因?yàn)楫?dāng)前定義的是一個(gè)類,所以其this 總是指向 類,所以TS 直接使用js中的this.
然而 有辦法解決這個(gè)問(wèn)題么? 當(dāng)然有。 讓我們來(lái)改變 class A
class A { ? ? constructor() { ? ? ? ? this.hander = ()=>{ ? ? ? ? ? ? this.count += 1; ? ? ? ? ? ? return this.count; ? ? ? ? } ? ? } ? ? public count: number = 0; ? ? public hander: () => number; }
這樣我們把hander 從類的 方法 變成了 類的變量,更重要的是 我們?cè)?構(gòu)造函數(shù)里面 使用 lamda 表達(dá)式 , 使用 lamda表達(dá)式 并不會(huì)改變this的作用域, 因?yàn)楫?dāng)前是一個(gè)構(gòu)造函數(shù),所以里面的this指向的是 當(dāng)前的類,(查看一下生成的js會(huì)更容易理解, 函數(shù)里面已經(jīng)沒(méi)有了this)
從js的角度, 因?yàn)楹瘮?shù)中沒(méi)有了this指針,所以也就不會(huì)因?yàn)?傳遞到其他的地方造成不一致的情況
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)vuex中store和$store的區(qū)別說(shuō)明
這篇文章主要介紹了對(duì)vuex中store和$store的區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07解決Vue動(dòng)態(tài)加載本地圖片問(wèn)題
這篇文章主要介紹了Vue如何動(dòng)態(tài)加載本地圖片的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10vue按需加載組件webpack require.ensure的方法
本篇文章主要介紹了vue按需加載組件webpack require.ensure的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn)
這篇文章主要介紹了VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11vue 項(xiàng)目中使用Loading組件的示例代碼
這篇文章主要介紹了vue 項(xiàng)目中使用Loading組件的示例代碼,使用 loding 過(guò)渡數(shù)據(jù)的加載時(shí)間2018-08-08vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法匯總
這篇文章主要介紹了vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12Vue-cli3執(zhí)行serve和build命令時(shí)nodejs內(nèi)存溢出問(wèn)題及解決
這篇文章主要介紹了Vue-cli3執(zhí)行serve和build命令時(shí)nodejs內(nèi)存溢出問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01