関数

関数式

このエントリーをはてなブックマークに追加
最終更新日 2016-12-31

標準関数式

標準関数式は、function キーワードを使用する形式です。関数名は省略可能で、標準関数式内の this は Any 型となります。

var foo = function(x: string): string {
    return "Hello, " + x;
};

アロー関数式

アロー関数式は、=> を使用する形式です。function キーワードと関数名が省略可能です。

var foo = (x: string): string => {
    return "Hello, " + x;
};

今回の例では関数本体は return 文のみで構成されるため、さらに { } と return キーワードも省略可能です。

var foo = (x: string): string => "Hello, " + x;

関数の型注釈を省略することで、さらに ( ) も省略可能です。

var foo = x => "Hello, " + x;

このようにアロー関数式を使用することで、関数式をシンプルに記述することができます。

アロー関数式のもう一つの特徴は、関数式内での this の扱いです。 標準関数式では、次の例のように関数式が入れ子の場合、外側の this をローカル変数に保存して使用する必要があります。

var messenger = {
    message: "Hello World",
    start: function() {
        var _this = this;
        setTimeout(function() { alert(_this.message); }, 3000);
    }
};
messenger.start();

一方、アロー関数式では、外側の this がそのまま内側の関数式でも使用できます。

var messenger = {
    message: "Hello World",
    start: function() {
        setTimeout(() => { alert(this.message); }, 3000);
    }
};
messenger.start();