欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

typescript中this報(bào)錯(cuò)的解決

 更新時(shí)間:2023年01月21日 08:28:53   作者:Codingwithlife  
這篇文章主要介紹了typescript中this報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(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ō)明

    這篇文章主要介紹了對(duì)vuex中store和$store的區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • 詳解Vuex中mapState的具體用法

    詳解Vuex中mapState的具體用法

    本篇文章主要介紹了詳解Vuex中mapState的具體用法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • vue如何在data中引入圖片的正確路徑

    vue如何在data中引入圖片的正確路徑

    這篇文章主要介紹了vue如何在data中引入圖片的正確路徑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • 解決Vue動(dòng)態(tài)加載本地圖片問(wèn)題

    解決Vue動(dòng)態(tài)加載本地圖片問(wèn)題

    這篇文章主要介紹了Vue如何動(dòng)態(tài)加載本地圖片的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-10-10
  • vue按需加載組件webpack require.ensure的方法

    vue按需加載組件webpack require.ensure的方法

    本篇文章主要介紹了vue按需加載組件webpack require.ensure的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn)

    VUE.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-11
  • vue 項(xiàng)目中使用Loading組件的示例代碼

    vue 項(xiàng)目中使用Loading組件的示例代碼

    這篇文章主要介紹了vue 項(xiàng)目中使用Loading組件的示例代碼,使用 loding 過(guò)渡數(shù)據(jù)的加載時(shí)間
    2018-08-08
  • vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法匯總

    vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法匯總

    這篇文章主要介紹了vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • vue實(shí)現(xiàn)掃碼功能

    vue實(shí)現(xiàn)掃碼功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • Vue-cli3執(zhí)行serve和build命令時(shí)nodejs內(nèi)存溢出問(wèn)題及解決

    Vue-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

最新評(píng)論