このナレッジノートではkintone開発でつまづきがちなthis問題を解決してくれるES6のアロー関数について解説します。
(args) => { /* statement */ } のような形の関数式をアロー関数(Arrow Funciton)と呼びます。
通常の function(args) { /* statement */ } の形の関数式との違いはthisの参照先が、宣言時のthisとなり、Function.prototype.bind などの関数でのthis束縛の変更が不可な点です。
具体的な例を挙げます。
var hoge = {
assign: function(target) {
target.log = function() {
console.log(this.a);
};
}
};
var fuga = {
a: "fuga",
assign: function(target) {
target.log = () => {
console.log(this.a);
};
}
};
var foo = {
a: "foo"
};
hoge.assign(foo);
foo.log(); // output: "foo"
fuga.assign(foo);
foo.log(); // output: "fuga"
上記のスクリプトをブラウザの開発者ツールのコンソールで実行してみてください。
コメントに書いてあるように、hoge.assignによって定義されたfoo.logでは関数内でthisの指すオブジェクトはfoo自身となります。
fuga.assignによって定義された関数はアロー関数なので、foo.logでthisの指すオブジェクトはfuga.assign内でthisが指すオブジェクト(すなわちfuga)となっているのがわかります。
複雑なコードを書く際にthisが何を指しているかはわかりにくくなりがちなため、こちらを活用できると大きく役立ちます。