【20】矢印関数

ES 6規格には、Arrow Function(矢印関数)という新しい関数が追加されました.なぜアロー・フュージョンと呼ぶのですか?定義には矢印が使用されています.

x => x*x

上の矢印関数は次のとおりです.

function (x) {
    return x * x;
}

ブラウザがES 6のArrow Functionをサポートしているかどうかをテストします.

'use strict';
var fn = x => x * x;
alert(' ES6 Arrow Function!');

矢印関数は匿名関数に相当し、関数定義を簡略化します.矢印関数には2つのフォーマットがあります.1つは上のように、1つの式しか含まれていません.returnも省略しました.もう1つは複数の文を含むことができますが、この場合は省略できません{...}およびreturn:

x => {
    if (x > 0) {
        return x*x;
    }
    else {
        return -x*x;
    }
}

パラメータが1つでない場合は、カッコ()で囲む必要があります.

//   ；
(x, y) => x * x + y * y

//  ；
() => 3.14

//  ;
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i

オブジェクトを返す場合は、単一の式の場合、このように書くとエラーが発生することに注意してください.

//SyntaxError:
x => { foo: x }

関数体の{…}と構文の競合があるので、次のように変更します.

//  ok;
x => ({ foo: x})

this矢印関数は匿名関数の略であるように見えますが、実際には、矢印関数と匿名関数には明らかな違いがあります.矢印関数の内部のthisは文法の役割ドメインであり、コンテキストによって決定されます.前の例に戻ると、JavaScript関数によるthisバインドのエラー処理のため、次の例では予想される結果が得られません.

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth;  // this window undefined
        };
        return fn();
    }
}

矢印関数はthisの指向を完全に修正し、thisは常に文法の役割ドメイン、すなわち外層呼び出し者objを指します.

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth;  // 1990
        var fn = () => new Date().getFullYear()  - this.birth;  // this obj 
        return fn();
    }
};
obj.getAge();  // 27

矢印関数を使用すると、以前のhackの書き方は:

var that = this;

もういらない.thisは矢印関数で構文ドメインに従ってバインドされているため、call()またはapply()で矢印関数を呼び出すと、thisをバインドできません.すなわち、入力された最初のパラメータは無視されます.

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth;  // 1990
        var fn = (y) => y - this.birth;  // this.birth 1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2017);  // 27