JavaScript Ok İşlevi
Ok işlevleri ES6'da tanıtıldı.
Ok işlevleri, daha kısa işlev sözdizimi yazmamıza izin verir:
let myFunction = (a, b) => a * b;
Ö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:
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 pencere nesnesini iki kez döndürdüğünü gösterir, çünkü pencere nesnesi işlevin "sahibidir".
Örnek
Normal bir işlevle , işlevi çağıranthis nesneyi temsil eder :
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Örnek
Bir ok işlevi ile işlevin sahibinithis temsil eder
:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
İşlevlerle çalışırken bu farklılıkları unutmayın. Bazen normal işlevlerin davranışı istediğiniz şeydir, değilse ok işlevlerini kullanın.
Tarayıcı Desteği
Aşağıdaki tablo, JavaScript'te Ok İşlevleri için tam desteğe sahip ilk tarayıcı sürümlerini tanımlar:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |