再談TypeScript的this

前陣子談過 TypeScript 使用 this 常遇到的問題(參考:TypeScript的this陷阱),經網友提醒,我才發現 TypeScript 對 () => { … } (Arrow Function Expression,箭頭函式表示式,索性簡稱「箭函式」XD )加了魔法:自動宣告 var _this = this ,並將 () => { … } 裡的 this 自動換成 _this。

前陣子重整一個中型網站,將 JavaScript 翻成 TypeScript,改寫不少原本用JavaScript function 模擬的 ViewModel 類別,不免觸及存取自身屬性或方法的情境。原本 ViewModel 裡用 var self = this 的方式解決 this 混淆問題(self 慣例源於Knockout,請參照 Managing ‘this’ 一節),起初我依賴箭函式(Arrow Function Expression)處理 this 置換,省下自行宣告 var self = this 的麻煩,但踩過一些地雷之後,最後仍決定回歸 var self = this 做法。

使用「箭函式 + this」我遇到比較容易混淆的情境有以下幾種

1.箭函式的 this 置換只適用在類別的函式宣告

module Blah {
  class Foo {
        name = "Foo";
        speak: () => void;
  }
  export class Boo {
      name = "Boo"
      test = () => {
          var foo = new Foo();
          foo.speak = () => {
              alert("Hi, I am " + this.name);
          }
          foo.speak();
      }
  }
}
 
var b = new Blah.Boo();
b.test();

以上案例有兩個物件 Foo 及 Boo,在 Boo 類別內宣告 test 箭函式,在其中建立 Foo 並指定其 speak 方法,寫成 foo.speak = () => { alert("Hi, I am " + this.name); },由於這段程式被放在 Boo.test() 中,雖然我們透過箭函式指定 foo.speak,但因為不在 Foo 類別內部,故 this 指向 Boo 的 Instance(執行個體),而非 Foo 的 Instance,執行結果將為 "Hi, I am Boo"。如想顯示 Foo 的名稱,在這個案例用 foo.name 取代 this.name 即可。Live Demo

2.箭函式內的 this 置換屬強制性,無法避免

考慮以下範例:

class blah {
    target: JQuery;
    constructor(t: JQuery) {
        this.target = t;
    }
    setColor = () => {
        this.target.each(() => {
            var o = $(this);
            o.css("color", o.text());
            o.text("Converted");
        });
    }
}
$("body").append("<div class='c'>red</div>");
var b = new blah($('.c'));
b.setColor();

我們在 setColor 箭函式中使用 jQuery.each(),並很時尚地也用箭函數寫 .each() 處理邏輯。很不幸的,以上程式無法正常運作,理由是在類別方法箭函式內的箭函式,this 也會被一併置換成類別物件的 Instance,如下圖所示。

箭函式中的 this 置換屬強制性,無法避免,但要克服很簡單,將箭函式改回傳統 function() { … } 即可:

    setColor = () => {
        this.target.each(function() {
            var o = $(this);
            o.css("color", o.text());
            o.text("Converted");
        });
    }

踩過幾次地雷,大概就能摸清楚 TypeScript 箭函式的 this 特性,幾乎不再誤用。但經一番琢磨,決定回歸自己宣告 var self = this,並在函式中使用 self 表示物件 Instance 的做法,不依賴 TypeScript 幫忙置換。理由是難免會遇到箭函式內穿插 $.each()、.click(function() { }) 等 this 代表其他物件、元素的場合,用 self 與 this 將二者明確區隔開,Z > B。

歡迎推文分享:
Published 18 September 2014 08:04 AM 由 Jeffrey
Filed under:
Views: 7,356



意見

# Kim said on 07 April, 2015 05:34 AM

我目前遇到的狀況是在Directive回call Controller的方法,而在Controller的this會是Directive的this,所以會發生錯誤。後來找到國外的文章是使用Instance Method來解決

blog.icanmakethiswork.io/.../typescript-instance-methods.html

# Jeffrey said on 07 April, 2015 08:16 PM

to Kim, 有具體一點的範例嗎?我好奇是否能用controllerMethod.apply(controllerInstance)解決,感覺又更簡單一點。( 參考:blog.darkthread.net/post-2009-04-10-js-func-apply.aspx

# Kim said on 07 April, 2015 10:23 PM

Hi 黑大,此篇的問題2

note.kimx.info/.../type-script-this.html

# Jeffrey said on 08 April, 2015 12:13 AM

to Kim, 謝謝回饋。在你的案例中,改用Isolated Scope:scope =   { ceSupplr: "&" },然後在Directive內呼叫scope.ceSupplr({ supplrDto: result.data }),也能避開this混淆問題。

# Kim said on 08 April, 2015 01:56 AM

cool

# 小風 said on 21 February, 2017 09:29 PM

最近在寫 TypeScript 用到 each 時也遇到這個坑,你的文章寫的很清楚,一看就懂了~

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<September 2014>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication