React ES6 Ok İşlevleri
Ok Fonksiyonları
Ok işlevleri, daha kısa işlev sözdizimi yazmamıza izin verir:
Önceki:
hello = function() {
return "Hello World!";
}
Ok İşlevli:
hello = () => {
return "Hello World!";
}
Kısalıyor! İşlevin yalnızca bir ifadesi varsa ve ifade bir değer döndürürse, parantezleri ve anahtar
kelimeyi kaldırabilirsiniz return:
Ok İşlevleri Varsayılan Olarak Dönüş Değeri:
hello = () => "Hello World!";
Not: Bu, yalnızca işlevin yalnızca bir ifadesi varsa çalışır.
Parametreleriniz varsa, bunları parantez içinde iletin:
Parametreli Ok Fonksiyonu:
hello = (val) => "Hello " + val;
Aslında, yalnızca bir parametreniz varsa, parantezleri de atlayabilirsiniz:
Sertikalı olmak!
95 $ KAYIT
Ne Hakkında this?
thisNormal işlevlere kıyasla ok işlevlerinde kullanımı da farklıdır .
Kısacası, ok işlevleriyle hiçbir bağlama yoktur
this.
Normal işlevlerde thisanahtar sözcük, işlevi çağıran pencere, belge, düğme veya her neyse olabilecek nesneyi temsil ediyordu.
Ok işlevleriyle, thisanahtar sözcük her zaman ok işlevini tanımlayan nesneyi temsil eder.
Aradaki farkı anlamak için iki örneğe bakalım.
Her iki örnek de, ilk olarak sayfa yüklendiğinde ve kullanıcı bir düğmeyi tıkladığında bir kez daha olmak üzere bir yöntemi iki kez çağırır.
İlk örnek normal bir işlev kullanır ve ikinci örnek bir ok işlevi kullanır.
Sonuç, ilk örneğin iki farklı nesne (pencere ve düğme) döndürdüğünü ve ikinci örneğin Header nesnesini iki kez döndürdüğünü gösterir.
Örnek
Normal bir işlevle, thisişlevi çağıran nesneyi temsil eder:
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Örnek
Bir ok işleviyle, işlevi thiskimin çağırdığına bakılmaksızın Header nesnesini temsil eder:
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
İşlevlerle çalışırken bu farklılıkları unutmayın. Bazen normal işlevlerin davranışı istediğiniz şeydir, değilse ok işlevlerini kullanın.