[Type Script] this 相關問題解決

關於TypeScript在類別內若要使用類別內的方法或全域屬性,我們會透過this來存取,如下圖,在NewModel方法內透過this存取屬性

image

問題1.在function內的this無法取得全域屬性

如下紅框,此時的this代表的是function本身
image

解決方法:

改成Lamba運算式寫法
image

參考編譯過後的script,會在進入function前宣告一個 _this的臨時變數來使用類別本身的this
image
關於此問題的更多解釋,可以參考黑大的文章

問題2:在類別的方法叫用另一類別的方法的this出現錯誤

此問題是我在撰寫一個AngularJs自訂驗證的Directive遇到,情境是我想在後端驗證完後順便將資料丟回Controller,如下圖所示,Directive去叫用Controller的SupplrCallback方法,但在this.Model…會取不到Model,因為此時的this是屬於Directive的,不是 Controller的

image

解法方法:

參了一篇國外的文章後,可以使用Instance Method來解決,如下將SupplrCallback改成Lamba寫法

image

參考編譯過後的script,會在建構式宣告方法,並建一個_this的變數給方法使用

image

跟未改成Lamba寫法的編譯Script作比較

image
Lamba會產生Instance Method,而原本的撰寫方式會產生prototype。本想全部都改成Lamba的寫法,但搜尋相關文章有寫道prototype的寫法會較節省記憶体,所以目前的作法是需要的時候,再改成Lamba。
本文的TypeScript

參考文章

http://blog.icanmakethiswork.io/2014/04/typescript-instance-methods.html
http://thecodeship.com/web-development/methods-within-constructor-vs-prototype-in-javascript/

這個網誌中的熱門文章

IIS 設定只允許特定IP進入