他の答えに不満。2019/3/13時点での上位投票の回答は実際には間違っています。
簡潔なバージョン=>とは、関数を記述するショートカットであり、現在の関数にバインドするためのものですthis
const foo = a => a * 2;
効果的なショートカットです
const foo = function(a) { return a * 2; }.bind(this);
あなたは短くなったすべてのものを見ることができます。我々は必要としなかっfunctionたり、returnや.bind(this)すら中括弧や括弧
アロー関数の少し長い例は
const foo = (width, height) => {
const area = width * height;
return area;
};
関数に複数の引数が必要な場合は括弧が必要であり、複数の式を記述したい場合は中括弧と明示的なが必要であることを示していますreturn。
その.bind部分を理解することは重要であり、それは大きなトピックです。それはthisJavaScriptの意味と関係があります。
すべての関数には、という暗黙のパラメーターがありますthis。this関数の呼び出し時の設定方法は、その関数の呼び出し方法によって異なります。
取る
function foo() { console.log(this); }
普通に呼べば
function foo() { console.log(this); }
foo();
this グローバルオブジェクトになります。
ストリクトモードの場合
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
そうなる undefined
またはthisを使用して直接設定できますcallapply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
thisドット演算子を使用して暗黙的に設定することもできます.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
関数をコールバックまたはリスナーとして使用するときに問題が発生します。クラスを作成し、クラスのインスタンスにアクセスするコールバックとして関数を割り当てたいとします。
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
要素がイベントを発生させて関数を呼び出すと、this値がクラスのインスタンスにならないため、上記のコードは機能しません。
その問題を解決する1つの一般的な方法は、 .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
矢印構文は私たちが書くことができる同じことをするので
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bind効果的に新しい機能を作ります。bind存在しない場合は、基本的にこのように自分で作成できます
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
スプレッドオペレーターのない古いJavaScriptでは
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
そのコードを理解するにはクロージャーを理解する必要がありますが、短いバージョンでbindは、thisバインドされた値で元の関数を常に呼び出す新しい関数が作成されます。アロー関数は同じことをするものです。bind(this)
