mozilla
Your Search Results

    アロー関数

    これは Harmony(ECMAScript 6) 提案の一部であり、実験段階の技術です。
    この技術の仕様は安定していません。ブラウザ互換性の一覧表を確認してください。またこれらの構文や動作は、仕様変更などにより、新しいバージョンのブラウザでは変更される可能性があるという点に注意してください。

    アロー関数式(またはファットアロー関数)はfunction式に比べより短い構文を持ち、 this の値をレキシカルに束縛します。アロー関数は常に匿名関数です。

    構文

    ([param] [, param]) => {
       statements
    }
    
    param => expression

    詳しい構文の例はこちらで見ることができます。

    param
    引数の名前です。引数がないときはかっこ () で表します。引数をひとつしかとらない場合、かっこは必要ではありません。 (例: foo => 1)
    statements or expression
    複数のステートメントを含むときは、波かっこ {} で囲う必要があります。しかし、ひとつの式の場合は必要ではありません。また、式は暗黙的にその関数が返す値となります。

    解説

    アロー関数の説明で2つの要素がありました。より短い関数とレキシカルな this です。

    より短い関数

    いくつかの関数のパターンで、より短い関数を自由に使用できます。比較できる例を示します。

    var a = [
      "We're up all night 'til the sun",
      "We're up all night to get some",
      "We're up all night for good fun",
      "We're up all night to get lucky"
    ];
    
    var a2 = a.map(function(s){ return s.length });
    
    var a3 = a.map( s => s.length );

    レキシカルな this

    アロー関数が登場する前は、それぞれの関数がそれ自身の this の値を定義していました。(コンストラクターでは新しいオブジェクト、 strict モードでの関数呼び出し時のundefined、関数が"オブジェクトのメソッド" として呼び出された場合のオブジェクトなどの場合など) これは、オブジェクト指向プログラミングをするうえでじれったいものだとわかりました。

    function Person() {
      // Person() のコンストラクターは自分自身を `this` として定義します。
      this.age = 0;
    
      setInterval(function growUp() {
        // 非strict モードでは、growUp() 関数は `this` を Person() コンストラクターで定義された `this` とは違い、グローバル オブジェクトとして定義します。
        this.age++;
      }, 1000);
    }
    
    var p = new Person();

    ECMAScript 3/5 では、この問題は this の値を外側で閉じた変数に代入することで修正できました。 

    function Person() {
      var self = this; // `self` の代わりに `that` を選ぶこともあります。どちらかを選んで徹底するようにしましょう。
      self.age = 0;
    
      setInterval(function growUp() {
        // コールバックは期待したオブジェクトの値を変数 `self` で参照します。
        self.age++;
      }, 1000);
    }

    また bound function はしかるべき this の値を growUp 関数に渡すことができます。

    アロー関数はそのコンテキストの this の値を捕捉するため、以下のコードは期待通りに動きます。

    function Person(){
      this.age = 0;
    
      setInterval(() => {
        this.age++; // |this| は person オブジェクトを参照します。
      }, 1000);
    }
    
    var p = new Person();

    strict モードについての関連事項

    与えられた this がレキシカルなとき、strict モード の規則は this については単に無視されます。

    var f = () => {'use strict'; return this};
    f() === window; // またはグローバル オブジェクト

    このほかは strict モードの規則が通常通り適用されます。

    // 空のアロー関数は undefined を返します。
    let empty = () => {};
    
    (() => "foobar")() // "foobar" を返します
    
    var simple = a => a > 15 ? 15 : a; 
    simple(16); // 15
    simple(10); // 10
    
    let max = (a, b) => a > b ? a : b;

    仕様

    ブラウザーの対応状況

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本的なサポート 未サポート 22.0 (22.0) 未サポート 未サポート 未サポート
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本的なサポート 未サポート 22.0 (22.0) 未サポート 未サポート 未サポート

    Firefox Note

    The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of "use strict"; is now required.

    This syntax is similar to Expression Closures added in Firefox 3 (details: Javascript 1.8)

    ドキュメントのタグと貢献者

    Contributors to this page: uu59, yuxxxx, teoli
    最終更新者: teoli,
    サイドバーを隠す