JavaScript Ok箭函数

Ders önerileri:

ES6'da oklu fonksiyonlar tanıtıldı.

Oklu fonksiyonlar, daha kısa fonksiyonlar yazmamıza olanak tanır:

Sözdizimi

Kişisel Olarak Deneyin

let myFunction = (a, b) => a * b;

hello = function() {
  Oklu fonksiyon kullanımından sonra:
}

Kişisel Olarak Deneyin

Önce:

hello = () => {
  Oklu fonksiyon kullanımından sonra:
}

Kişisel Olarak Deneyin

return "Hello World!"; Gerçekten kısalttı! Eğer fonksiyon sadece bir satır içeriyorsa ve bu satır bir değer döndürüyorsa, parantezleri ve return

Anahtar kelime:

Oklu fonksiyonun varsayılan döndürme değeri:

Kişisel Olarak Deneyin

hello = () => "Hello World!";Yorum:

Bu, fonksiyon sadece bir satır içeriyse geçerlidir.

Eğer parametreleriniz varsa, bunları parantez içine geçirmelisiniz:

Parametreli oklu fonksiyon:

Kişisel Olarak Deneyin

hello = (val) => "Hello " + val;

Aslında, yalnızca bir parametre varsa, parantezleri de atlayabilirsiniz:

Kapsamlı olmayan oklu fonksiyon:

Kişisel Olarak Deneyin

this hello = val => "Hello " + val;

ne yapmalıyız? this Bu, standart fonksiyonlara göre oklu fonksiyonların:

Kısacası, oklu fonksiyon kullanımı, işleme yöntemlerine de farklılık gösterir. this bağlanmıştır.

Standart fonksiyonlarda, anahtar kelime: this fonksiyonu çağıran nesneyi temsil eder, bu da pencere, belge, düğme veya başka herhangi bir şey olabilir.

Oklu fonksiyonlar için:this Anahtar kelime her zaman oklu fonksiyonu tanımlayan nesneyi temsil eder.

Bu arasındaki farkları anlamak için iki örnek inceleyelim.

Bu iki örnek de iki kez yöntem çağrır, birincisi sayfa yüklenirken, ikincisi kullanıcı butona tıkladığında.

İlk örnek standart fonksiyonu kullanır, ikinci örnek ise oklu fonksiyonu kullanır.

Sonuç, ilk örnekte iki farklı nesneyi (window ve button) döndürdü (window nesnesi fonksiyonun 'sahibi' olduğu için).

örnek

Standart fonksiyonlar için, this, fonksiyonu çağıran nesneyi temsil eder:

// Standart fonksiyon:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// window nesnesi bu fonksiyonu çağırır:
window.addEventListener("load", hello);
// button nesnesi bu fonksiyonu çağırır:
document.getElementById("btn").addEventListener("click", hello);

Kişisel Olarak Deneyin

örnek

箭头函数 this Fonksiyonun sahibini belirtir:

// Ok işaretli fonksiyon:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// window nesnesi bu fonksiyonu çağırır:
window.addEventListener("load", hello);
// button nesnesi bu fonksiyonu çağırır:
document.getElementById("btn").addEventListener("click", hello);

Kişisel Olarak Deneyin

Fonksiyonları kullanırken bu farklılıkları unutmayın. bazen, normal fonksiyonların davranışı tam olarak istediğiniz gibi olabilir, değilse ok işaretli fonksiyonları kullanın.

Tarayıcı Desteği

Aşağıdaki tablo, ilk tamamen JavaScript ok işaretli fonksiyonları destekleyen tarayıcı sürümlerini gösterir:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
2015 Yılı Eylül 2015 Yılı Temmuz 2013 Yılı Mayıs 2016 Yılı Eylül 2015 Yılı Eylül