Diğer cevaplardan memnun kalmadım. 2019/3/13 itibarıyla en çok oy alan cevap aslında yanlış.
Bunun =>anlamı kısa kısa versiyonu, bir fonksiyon yazma ve onu akıma bağlama için bir kısayoldurthis
const foo = a => a * 2;
Etkili bir kısayol
const foo = function(a) { return a * 2; }.bind(this);
Kısaltılmış her şeyi görebilirsiniz. İhtiyacımız yoktu function, ne returnde.bind(this)Parantez veya parantezlere hatta de
Ok işlevinin biraz daha uzun bir örneği
const foo = (width, height) => {
const area = width * height;
return area;
};
Eğer işleve birden fazla argüman istiyorsak, parantezlere ihtiyacımız olduğunu ve tek bir ifadeden daha fazlasını yazmak istiyorsak, parantezlere ve açık bir return .
Parçayı anlamak önemlidir .bindve bu büyük bir konudur. thisJavaScript'te ne anlama geldiğiyle ilgilidir.
ALL işlevlerinin örtük bir parametresi vardır this. NasılthisBir işlevi çağırırken ayarlanacağı, bu işlevin nasıl çağrıldığına bağlıdır.
almak
function foo() { console.log(this); }
Eğer normal ararsan
function foo() { console.log(this); }
foo();
this küresel nesne olacak.
Katı moddaysanız
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Olacak undefined
Sen ayarlayabilirsiniz thiskullanarak doğrudan callveyaapply
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}
thisNokta operatörünü kullanarak örtük olarak da ayarlayabilirsiniz..
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
Bir işlevi geri arama veya dinleyici olarak kullanmak istediğinizde bir sorun ortaya çıkar. Sınıf oluşturursunuz ve sınıfın bir örneğine erişen geri çağrı olarak bir işlev atamak istersiniz.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
Yukarıdaki kod çalışmaz, çünkü öğe olayı tetiklediğinde ve işlevi çağırdığında thisdeğer sınıfın örneği olmaz.
Bu sorunu çözmenin yaygın yollarından biri .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Çünkü ok sözdizimi yazabildiğimiz şeyi yapıyor
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindetkili bir şekilde yeni bir işlev yapar . Eğer bindolmasaydı, temelde böyle bir şey yapabilirdin
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
Forma operatörü olmayan daha eski JavaScript'te
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
Bu kodu anlamak, kapanışların anlaşılmasını gerektirir , ancak kısa sürüm bindher zaman orijinal işlevi thisona bağlı olan değerle çağıran yeni bir işlevdir . ok işlevi aynı şeyi yapar çünkübind(this)
