Son güncelleme: 04/09/2018

Ok işlevleri normal işlevlerin kısaltılmış versiyonudur. Ok fonksiyonları, parantez içindeki fonksiyon parametrelerinin önünde ve ardından fonksiyon gövdesinin kendisi gelen bir ok işareti (=>) kullanılarak oluşturulur. Örneğin:

Toplam = (x, y) => x + y olsun; a = toplam(4, 5); // 9 let b = toplam(10, 5); // 15

Bu durumda (x, y) => x + y fonksiyonu iki sayıyı toplar ve toplam değişkenine atanır. Fonksiyon iki parametre alır: x ve y. Vücudu bu parametrelerin değerlerinin toplamıdır. Ve oktan sonra aslında sayıların toplamını temsil eden belirli bir değer bulunduğundan, fonksiyon bu değeri döndürür. Ve bu fonksiyonu toplam değişkeni aracılığıyla çağırabilir ve sonucunu a ve b değişkenlerine aktarabiliriz.

Bir okun ardından değer döndüren bir işlem veya ifade geliyorsa, bu değer aslında ok işlevinden döndürülür. Ancak hiçbir şey döndürmeyen ve yalnızca bazı eylemleri gerçekleştiren bir ifade, bir işlevin gövdesi olarak da kullanılabilir:

Toplam = (x, y) => console.log(x + y); toplam(4, 5); // 9 toplam(10, 5); // 15

Bu durumda console.log() işlevi hiçbir şey döndürmez ve dolayısıyla sum işlevi de herhangi bir sonuç döndürmez.

Bir fonksiyon bir parametre alıyorsa, etrafındaki parantezler atlanabilir:

Var kare = n => n * n; console.log(kare(5)); // 25 console.log(kare(6)); // 36 console.log(kare(-7)); // 49

Bir fonksiyonun gövdesi bir ifade kümesini temsil ediyorsa, bunlar küme parantezleri içine alınır:

Var kare = n => ( let sonuç = n * n; dönüş sonucu; ) console.log(square(5)); // 25

Bu durumda bir işlevin sonucunu döndürmek için standart return ifadesini kullanın.

Ok fonksiyonunun bir nesne döndürdüğü duruma özellikle dikkat edilmelidir:

Kullanıcı = (kullanıcıAdı, kullanıcıYaşı) => ((isim: kullanıcıAdı, yaş: kullanıcıYaşı)); let tom = user("Tom", 34); let bob = user("Bob", 25); console.log(tom.name, tom.age); // "Tom", 34 console.log(bob.name, bob.age); // "Bob", 25

Bir nesne küme parantezleri kullanılarak da tanımlanır, ancak parantez içine alınır.

Ok işlevi herhangi bir parametre almıyorsa boş parantezler yerleştirilir:

Var merhaba = ()=> console.log("Merhaba Dünya"); Merhaba(); // Merhaba Dünya merhaba(); // Selam Dünya

Çok moda oldular, her yeni yazıda görüyoruz. Ve eğer bunlara alışkın değilseniz, ok işlevlerini içeren modern (ES6) kodu anlamakta zorlanacaksınız.

Bu makalenin amacı bunları ne zaman ve nasıl kullanacağınızı anlatmak değildir. Yeni sözdizimini ilk kez görenler için anlatmaya çalışacağım. Kullanıp kullanmamanız önemli değil, ancak er ya da geç yine de bir yerlerde onunla karşılaşacaksınız. Dolayısıyla bu yeni sözdiziminin mekaniğini anlamak daha iyi.

İşte küçük bir örnek:

Const addOne = fonksiyon(n) ( return n + 1; )

Yukarıdaki kod şu şekilde yazılabilir:

Const addOne = (n) => ( return n + 1; )

Veya bu durumda daha da kısa:

Sabit ekleBir = (n) => n + 1;

İkinci örnekte ( ... ) küme parantezleri kullanılıyor, ancak yalnızca bir kod satırı olduğundan, üçüncü örnekte görüldüğü gibi küme parantezleri atlanabilir ve geri dönüş ima edilir.

Bir ok fonksiyonunun bir parametresi olduğunda parantezler atlanabilir:

// Şuydu: someCallBack((sonuçlar) => ( ... )) // Şimdi: someCallBack(sonuçlar => ( ... ))

Ancak parametre yoksa açma ve kapama parantezlerini kullanmanız gerekir:

SomeCallBack(() => ( ... ))

İşlev okları özellikle geri aramalar için kullanışlıdır. JavaScript'e aşina olanlar, onun sözcüksel kapsamına aşinadır, bu oldukça güzeldir ancak bunun gibi hileler yapabilir ( Bu):

Var_this = bu; someCallBack(function() ( _this.accessOuterScope(); ))

Bu "_this"in ("self" veya "that" gibi) çeşitli varyasyonları vardır, ancak fikir aynıdır. Geri çağırma işlevlerinde dış kapsam sürümüne erişmemiz gerekir, ancak fikir aynıdır. Geri çağırma işlevlerinde, this öğesinin dış kapsamının sürümüne erişmemiz gerekiyor; bu, bir geri çağırma işlevinden bahsettiğimiz için artık öncekinden farklı.

Kullanarak ok fonksiyonları her iki durumda da aynı "bu" olan "blok kapsamı" ve "bu" elde ederiz. Bu, yukarıdaki kodun _this = this olmadan yeniden yazılabileceği anlamına gelir:

SomeCallBack(() => ( this.accessOuterScope(); ))

React'teki gibi, olayın gerçekleştiği bir durum hayal edelim. tıklamada doSomething() , () çağrılmalı, ancak aynı zamanda doSomething() işlevine (örn. ID) argümanlar iletilmelidir. Bu örnek aslında işe yaramıyor:

Bazı kullanıcılar)))

Kod çalışacaktır, ancak teknik olarak sayfa yüklendiğinde hemen doSomething() öğesini çağıracaktır. Bu sorunu çözmek için bazı geliştiriciler sarmalayıcı işlevine başvuruyor:

Const User = React.createClass(function() ( render: function() ( Bazı kullanıcıları döndürür), onClick: function() ( doSomething(this.props.userId); ) ))

this.onClick'te parantez bulunmaması, bunun bir işlev çağrısı yerine yalnızca bir işlev referansı olduğu anlamına gelir.

onClick() işlevi artık doSomething() için bir sarmalayıcı işlevi görüyor. Ok işlevleriyle şu türden "sarmalayıcılar" oluşturabilirsiniz:

Const User = React.createClass(function() ( render: function() ( return doSomething(this.props.userId))>Bazı kullanıcılar ) ))

Alternatif olarak, herhangi bir sarmalayıcı (ok işlevleri veya herhangi bir şey) gerektirmeyen .bind() işlevini de kullanabiliriz:

Const User = React.createClass(function() ( render: function() ( Bazı kullanıcıları döndürür )))

En son sürümler dışındaki tarayıcılar için desteğe ihtiyacınız varsa Krom Ve Firefox, kullanmak Babil aktarıcı yazdığınız ES6 kodunu ES5'e dönüştürmek için.

JavaScript “this” anahtar kelimesi hakkında: açıklamalı kullanım özellikleri

Uzun süre bu anahtar kelime benim için bir sır olarak kaldı. Güçlü bir araçtır ancak anlaşılması kolay değildir.

Java, PHP veya diğer herhangi bir normal dilin bakış açısından bu, sınıf yöntemindeki geçerli nesnenin örneği olarak kabul edilir; ne eksik ne fazla. Çoğu zaman bir yöntemin dışında kullanılamaz ve bu yaklaşım yanlış anlaşılmaz.

JavaScript'te bu, işlevin geçerli yürütme bağlamıdır. Çünkü bir fonksiyon dört şekilde çağrılabilir:

• işlev çağrısı: uyarı("Merhaba Dünya!"),
• yöntem çağrısı: console.log("Merhaba Dünya!"),
• yapıcı çağrısı: new RegExp("\\d"),
• dolaylı çağrı: warning.call(unDefinition, "Merhaba Dünya!"),

ve her biri kendi bağlamını tanımlıyor, bunun davranışı acemi geliştiricilerin beklentileriyle biraz tutarsız. Ayrıca katı mod, yürütme bağlamını da etkiler.

This anahtar sözcüğünü anlamanın anahtarı, bir işlevin nasıl çağrıldığını ve bağlamı nasıl etkilediğini anlamaktır. Bu makalede işlev çağrıları, çağrıların bunu nasıl etkilediği ve bağlamı tanımlarken karşılaşılan yaygın tuzaklar ele alınmaktadır.

Başlamadan önce birkaç terimi tanıyalım:

• Çağrı, işlev gövde kodunun yürütülmesidir. Örneğin, parseInt işlevine yapılan çağrı parseInt("15") olacaktır.
• Çağıran bağlam, işlev gövdesindeki this değeridir.
• Bir işlevin kapsamı, işlevin gövdesinden erişilebilen değişkenler, nesneler ve işlevler kümesidir.

İşlev nesnesi olan ifadenin ardından bir açık parantez (, virgülle ayrılmış bir bağımsız değişken listesi ve bir kapanış parantezi), örneğin parseInt("18") geldiği zaman bir işlev çağrısı yapılır. Bir ifade, myObject.myFunction'a yöntem çağrısı yapan bir erişimci olamaz. Örneğin, .join("), bir işlev çağrısı değil, bir yöntem çağrısıdır.

Basit bir işlev çağrısı örneği:

Fonksiyon merhaba(isim) ( return "Merhaba " + isim + "!"; ) // Fonksiyon çağırma var message = merhaba("Dünya"); console.log(mesaj); // => "Merhaba Dünya!"

merhaba("Dünya") bir işlev çağrısıdır: merhaba, parantez içinde "Dünya" argümanının takip ettiği bir işlev nesnesi olarak ele alınır.

Var message = (işlev(isim) ( return "Merhaba " + isim + "!"; ))("Dünya"); console.log(mesaj); // => "Merhaba Dünya!"

Bu aynı zamanda bir işlev çağrısıdır: ilk parantez çifti (işlev(isim) (...)) bir işlev nesnesi olarak ele alınır ve ardından parantez içindeki bir argüman gelir: ("Dünya") .

bu, işlevi çağırırkenki genel nesnedir

Genel nesne çalışma zamanı tarafından tanımlanır. Bir web tarayıcısında bu, pencere nesnesidir.

Bir işlev çağrısında yürütme bağlamı genel nesnedir. Aşağıdaki fonksiyonun içeriğini kontrol edelim:

Function sum(a, b) ( console.log(this === window); // => true this.myNumber = 20; // global nesneye "myNumber" özelliğini ekleyin return a + b; ) // sum( ) bir fonksiyon olarak çağrılır // sum()'daki bu global bir nesnedir (pencere) console.log(sum(15, 16)); // => 31 console.log(window.myNumber); // => 20

sum(15, 16) çağrıldığında, JavaScript bunu otomatik olarak tarayıcıdaki pencere olan global bir nesne olarak başlatır.

Bu, herhangi bir işlevin kapsamı dışında kullanıldığında (en dıştaki kapsam: genel yürütme bağlamı), aynı zamanda genel nesneye de atıfta bulunur:

Console.log(bu === pencere); // => true this.myString = "Merhaba Dünya!"; console.log(window.myString); // => "Merhaba Dünya!" console.log(bu === pencere); // => doğru

katı modda bir işlevi çağırırken bu tanımsızdır

new City("Paris") bir yapıcı çağrısıdır. Nesnenin başlatılması özel bir sınıf yöntemiyle kontrol edilir: yapıcı, bu yeni oluşturulan nesnedir.

Bir kurucuyu çağırmak, kurucunun prototipinden özellikleri miras alan yeni bir boş nesne oluşturur. Yapıcı fonksiyonunun rolü nesneyi başlatmaktır. Bildiğiniz gibi bu tür çağrının bağlamına örnek denir. Bu bir sonraki bölümün konusu.

myObject.myFunction erişimcisinin önünde new anahtar sözcüğü bulunduğunda, JavaScript, yöntem çağrısı yerine yapıcı çağrısı yapacaktır. Örnek olarak new myObject.myFunction()'ı ele alalım: ilk olarak, extractFunction = myObject.myFunction erişimcisini kullanarak, işlev çıkarılır ve ardından yeni bir nesne oluşturmak için yapıcı olarak çağrılır: new extractFunction() .

bu yeni oluşturulan nesne

Yapıcı çağrısının bağlamı yeni oluşturulan nesnedir. Yapıcı işlev bağımsız değişkenindeki verilerle bir nesneyi başlatmak için kullanılır.

Aşağıdaki örnekte bağlamı kontrol edelim:

Function Foo () ( console.log(bu Foo örneği); // => true this.property = "Varsayılan Değer"; ) // Yapıcı çağrısı var fooInstance = new Foo(); console.log(fooInstance.property); // => "Varsayılan Değer"

new Foo(), fooInstance bağlamıyla bir yapıcı çağrısı yapar. Nesne Foo'nun içinde başlatılır: this.property varsayılan bir değere ayarlanır.

Aynı şey class kullanılırken de olur, yapıcı yönteminde yalnızca başlatma gerçekleşir:

/* jshint esnext: true */ class Bar ( yapıcı() ( console.log(Bar'ın bu örneği); // => true this.property = "Varsayılan Değer"; )) // Yapıcı çağrısı var barInstance = new Bar( ); console.log(barInstance.property); // => "Varsayılan Değer"

new Bar() yürütüldüğünde, JavaScript boş bir nesne oluşturur ve onu yapıcı yönteminin bağlamı haline getirir. Artık şunu kullanarak özellikler ekleyebilirsiniz: this.property = "Default Value".

Bazı JavaScript işlevleri yalnızca yapıcı olarak değil aynı zamanda işlev olarak çağrıldığında örnekler oluşturur. Örneğin, RegExp:

Var reg1 = new RegExp("\\w+"); var reg2 = RegExp("\\w+"); console.log(reg1 RegExp örneği); // => true console.log(reg2 RegExp örneği); // => true console.log(reg1.source === reg2.source); // => doğru

new RegExp("\\w+") ve RegExp("\\w+") yürütüldüğünde, JavaScript eşdeğer normal ifade nesneleri oluşturur.

Bir nesne oluşturmak için işlev çağrısı kullanmak potansiyel olarak tehlikelidir (fabrika yöntemini atlarsanız), çünkü bazı kurucular new anahtar sözcüğünün yokluğunda nesneyi başlatamayabilir.

Aşağıdaki örnek sorunu göstermektedir:

Fonksiyon Araç(tip, tekerleklerCount) ( this.type = tip; this.wheelsCount = wheelCount; bunu döndür; ) // Fonksiyon çağrısı var car = Araç("Araba", 4); console.log(araba.tipi); // => "Araba" console.log(car.wheelsCount); // => 4 console.log(araba === pencere); // => doğru

Araç, bağlam nesnesinin type ve wheelCount özelliklerini ayarlayan bir işlevdir. Araç("Car", 4) çalıştırıldığında, doğru özelliklere sahip bir araba nesnesi döndürür: car.type, "Car" değerine eşittir ve car.wheelsCount, 4'tür. Her şeyin olması gerektiği gibi çalıştığını düşünmek kolaydır.

Ancak, işlev çağrıldığında bu pencere nesnesidir ve Araç("Araba", 4) pencere nesnesinin özelliklerini ayarlar - ah, bir şeyler ters gitti. Yeni nesne oluşturulmadı.

Bir yapıcı çağrısı beklendiğinde new operatörünü kullandığınızdan emin olun:

Fonksiyon Araç(tip, tekerleklerCount) ( if (!(Bu Araç örneği)) ( throw Error("Hata: Yanlış çağırma"); ) this.type = tür; this.wheelsCount = wheelCount; şunu döndür; ) // Oluşturucu çağırma var araba = new Araç("Araba", 4); console.log(araba.tipi); // => "Araba" console.log(car.wheelsCount); // => 4 console.log(Aracın araba örneği); // => true // İşlev çağrısı. Bir hata oluşturur. var kırıkAraba = Araç("Bozuk Araba", 3);

new Araç("Araba", 4) doğru çalışıyor: new kelimesi mevcut olduğundan yeni bir nesne yaratılıyor ve başlatılıyor.

İşlev çağrısına doğrulama eklendi: yürütme bağlamının doğru nesne türüne sahip olduğundan emin olmak için bu Araç örneği. Bu Araç değilse bir hata oluşturulur. Bu nedenle, eğer Araç("Kırık Araba", 3) yürütülürse (yeni olmadan), o zaman bir istisna atılır: Hata: Yanlış çağırma.

Bir işlev .call() veya .apply() yöntemleriyle çağrıldığında dolaylı bir çağrı yapılır.

/* jshint esnext: true */ var sumArguments = (...args) => ( console.log(typeof argümanları); // => "tanımsız" return args.reduce((sonuç, öğe) => sonuç + öğe ); console.log(sumArguments.name); // => "" console.log(sumArguments(5, 5, 6)); // => 16

ok fonksiyonunun tanımlandığı bağlam budur

Bir ok işlevi kendi yürütme bağlamını yaratmaz, ancak bunu tanımlandığı harici işlevden ödünç alır.

Aşağıdaki örnek bağlam şeffaflığını göstermektedir:

/* jshint esnext: true */ class Nokta ( yapıcı(x, y) ( this.x = x; this.y = y; ) log() ( console.log(this === myPoint); setTimeout(()) => ( console.log(this === myPoint); // => true console.log(this.x + ":" + this.y); // => "95:165" ), 1000); ) ) var myPoint = new Point(95, 165); myPoint.log();

setTimeout, ok işlevini log() yöntemiyle aynı bağlamda (myPoint yöntemi) çağırır. Gördüğümüz gibi bir ok fonksiyonu, tanımlandığı fonksiyonun bağlamını "miras alır".

Bu örnekte normal bir işlevi kullanmaya çalışırsanız, kendi bağlamını (pencere veya tanımsız) yaratacaktır. Bu nedenle, kodun doğru çalışması için bağlamı manuel olarak bağlamanız gerekir: setTimeout(function() (...).bind(this)) . Bu zahmetlidir, dolayısıyla ok işlevini kullanmak daha kolaydır.

Bir ok işlevi tüm işlevlerin dışında tanımlanmışsa bağlamı genel bir nesnedir:

/* jshint esnext: true */ var getContext = () => ( console.log(bu === pencere); // => true bunu döndür; ); console.log(getContext() === pencere); // => doğru

Ok işlevi sözcüksel bağlamla kesin olarak ilişkilendirilir. bu, bağlam değiştirme yöntemi kullanılarak bile değiştirilemez:

/* jshint esnext: true */ var sayılar = ; (function() ( var get = () => ( bunu döndür; ); console.log(bu === sayılar); // => true console.log(get()); // => // Kullan .apply() ve .call() ile ok işlevi console.log(get.call()); // => console.log(get.apply()); // => // Bind console.log(get) ); .bind()()); // =>)).call(sayılar);

.call(numbers) kullanılarak dolaylı olarak çağrılan bir işlev, bunu numaraların değerine ayarlar. Ok işlevi get aynı zamanda sayıları da bu şekilde alır çünkü bağlamı sözcüksel olarak alır. get nasıl çağrılırsa çağrılsın bağlamı her zaman sayılar olacaktır. Farklı bir bağlamla dolaylı olarak çağırmak (.call() veya .apply() kullanarak), yeniden bağlamanın (.bind() kullanarak) hiçbir etkisi olmayacaktır.

Bir ok işlevi yapıcı olarak kullanılamaz. new get() öğesini çağırırsanız, JavaScript şu hatayı verecektir: TypeError: get is not astructor.

Bir yöntemi bildirmek için ok işlevini kullanmak isteyebilirsiniz. Yeterince adil: bildirimleri normal ifadeyle karşılaştırıldığında çok daha kısa: (param) => (...) yerine function(param) (..) .

Bu örnek, bir ok işlevi kullanılarak Period sınıfının format() yönteminin tanımlanmasını gösterir:

/* jshint esnext: true */ function Dönem (saat, dakika) ( this.hours = saat; this.dakika = dakika; ) Period.prototype.format = () => ( console.log(this === window) ; // =>

Biçim, global bağlamda tanımlanan bir ok işlevi olduğundan, bu, window nesnesidir. Format, walkPeriod.format() nesnesinin bir yöntemi olarak yürütülse bile, window, çağıran bağlam olarak kalır. Bunun nedeni, ok işlevinin diğer çağrı türleri tarafından değiştirilmeyen statik bir içeriğe sahip olmasıdır.

bu penceredir, dolayısıyla this.hours ve this.dakikalar tanımsız hale gelir. Yöntem, istenen sonuç olmayan "tanımsız saat ve tanımsız dakika" dizesini döndürür.

Bir işlev ifadesi sorunu çözer çünkü normal bir işlev, çağrıya bağlı olarak bağlamını değiştirir:

İşlev Dönemi (saat, dakika) ( this.hours = saat; this.dakika = dakika; ) Period.prototype.format = function() ( console.log(this === walkPeriod); // => true bunu döndür. saat + "saat ve " + this.dakika + "dakika" ); var walkPeriod = new Period(2, 30); console.log(walkPeriod.format());

walkPeriod.format(), walkPeriod bağlamına sahip bir yöntem çağrısıdır. this.hours 2 değerini alır ve this.dakika 30 değerini alır, dolayısıyla yöntem doğru sonucu döndürür: "2 saat ve 30 dakika".

İşlev çağrısı bu konuda en büyük etkiye sahip olduğundan, bundan sonra şunu sormayın:

Bu nereden geliyor?

ve sor:

Fonksiyon nasıl çağrılır?

Ok fonksiyonu durumunda şunu sorun:

Ok fonksiyonunun bildirildiği yer burası nedir?

Buna bu yaklaşım sizi gereksiz baş ağrılarından kurtaracaktır.

Bağlamlarda kafanızı karıştırmayın! 🙂

12 cevap

Bu ok işlevidir. Ok işlevleri, ECMAscript 6'da sunulan ve işlev ifadelerini nasıl kullandığınıza benzer şekilde kullanılabilen kısa bir sözdizimidir. Başka bir deyişle, function (foo) (...) gibi ifadelerin yerine sıklıkla bunları kullanabilirsiniz. Fakat aralarında bazı önemli farklılıklar var. Örneğin, kendi bu değerlerini bağlamazlar (aşağıdaki tartışmaya bakınız).

Ok işlevleri ECMAscript 6 spesifikasyonunun bir parçasıdır. Henüz tüm tarayıcılarda desteklenmemektedir ancak Node v.2'de kısmen veya tamamen desteklenmektedir. 4.0+ ve 2018 itibarıyla kullanımda olan modern tarayıcıların çoğunda. (Aşağıda desteklenen tarayıcıların kısmi bir listesi bulunmaktadır).

Mozilla belgelerinden:

Bir ok işlevi ifadesi (aynı zamanda kalın ok işlevi olarak da bilinir), işlev ifadelerinden daha kısa bir sözdizimine sahiptir ve this değerini sözcüksel olarak bağlar (kendi this , argümanları , super veya new.target değerini bağlamaz). Ok işlevleri her zaman anonimdir. Bu işlev ifadeleri, yöntem dışı işlevler için en uygun olanıdır ve yapıcı olarak kullanılamaz.

Ok fonksiyonunun en kullanışlı özelliklerinden biri yukarıdaki metinde gizlidir:

Ok işlevi... sözcüksel olarak this değerini bağlar (kendi this değerini bağlamaz...)

Basit bir ifadeyle bu, ok işlevinin this değerini kendi bağlamından sakladığı ve kendi this değerine sahip olmadığı anlamına gelir. Geleneksel bir işlev, nasıl tanımlandığına ve çağrıldığına bağlı olarak this değerini kendi başına bağlayabilir. Bu, self = this gibi birçok jimnastik gerektirebilir; vb. buna başka bir işlevin içindeki bir işlevden erişmek veya bunları değiştirmek için. Bu konu hakkında daha fazla bilgi için Mozilla belgelerindeki açıklamalara ve örneklere bakın.

Örnek (ayrıca dokümanlardan):

Var a = [ "Bütün gece "güneşe kadar ayaktayız", "Bütün gece biraz almak için ayaktayız", "Bütün gece eğlenmek için ayaktayız", "Bütün gece uyanığız şanslı" ]; // Bu iki atama eşdeğerdir: // Eski tarz: var a2 = a.map(işlev(ler)( dönüş s.uzunluk)); // ok işlevlerini kullanan ECMAscript 6 var a3 = a.map (s => s.uzunluk); // hem a2 hem de a3 eşit olacaktır;

Node'da ok işlevlerini kullanabilirsiniz ancak tarayıcı desteği tam olarak doğru değildir.

Bu işlevselliğe yönelik tarayıcı desteği önemli ölçüde gelişti ancak çoğu tarayıcı tabanlı uygulama için hâlâ yeterince yaygın değil. 12 Aralık 2017 itibarıyla güncel sürümlerde desteklenmektedir:

• Chrome (45+'ye kıyasla)
• Firefox (22+'ye karşı)
• Kenar (12+'ye karşı)
• Opera (v. 32+)
• Android tarayıcı (sürüm 47+)
• Opera Mobile (sürüm 33+)
• Android için Chrome (sürüm 47+)
• Android için Firefox (sürüm 44+)
• Safari (sürüm 1 0+)
• iOS Safari (sürüm 10.2+)
• İnternet Samsung (v. 5+)
• Baidu Tarayıcı (v. 7. 12+)

Şu ülkelerde desteklenmiyor:

• IE (Madde 11'e kadar)
• Opera Mini (8.0 sürümüne kadar)
• Blackberry Tarayıcı (sürüm 10'a kadar)
• IE Mobile (sürüm 11'e kadar)
• Android için UC Tarayıcı (sürüm 11.4'e kadar)
• QQ (sürüm 1.2'ye kadar)

Daha fazla (ve daha güncel) bilgiyi CanIUse.com'da bulabilirsiniz (bağlılığı yoktur).

Bu, ECMAScript 2015 spesifikasyonunun bir parçası olan ok işlevi olarak bilinir...

var foo = ["a", "ab", "abc"]; var bar = foo.map(f => f.uzunluk); console.log(çubuk); // 1,2,3

Öncekine göre daha kısa sözdizimi:

// < ES6: var foo = ["a", "ab", "abc"]; var bar = foo.map(function(f) { return f.length; }); console.log(bar); // 1,2,3

Bir başka şaşırtıcı şey de sözcükselliktir... Tipik olarak şöyle bir şey yaparsınız:

function Foo() ( this.name = name; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = function() ( var self = this; setInterval(function() ( // bu Foo () değil, pencere, beklediğiniz gibi console.log(this); // // bu yüzden bunu setInterval()'dan önce self'e yeniden atadık console.log(self.count++), 1000) ) new Foo();

Ancak bu, şunun gibi bir ok kullanılarak yeniden yazılabilir:

function Foo() ( this.name = name; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = function() ( setInterval(() => ( console.log(this); // console.log(this.count); // 1, 2, 3 this.count++; 1000)) new Foo();

Bu, ECMAScript 6'da tanıtılan "ok işlevi ifadesi" olacaktır.

Tarihsel amaçlar doğrultusunda (wiki sayfası daha sonra değişirse), bu:

Bir ok işlevi ifadesi, bir işlev ifadesinden daha kısa bir sözdizimine sahiptir ve bu değeri sözcüksel olarak bağlar. Ok işlevleri her zaman anonimdir.

Ayrıca Şişman Ok Fonksiyonları olarak da bilinir. Bu, function()() gibi işlev ifadelerini yazmanın basit ve anlaşılır bir yoludur.

Ok İşlevleri, işlevleri tanımlarken işlev, dönüş ve () ihtiyacını ortadan kaldırabilir. Bunlar, Java veya Python'daki lambda ifadelerine benzer tek satırlık satırlardır.

const kuyruk = ["Dave", "Sarah", "Sharon"]; const sonrakiMüşteri = () => kuyruk; console.log(nextCustomer()); // "Dave"

Aynı ok işlevinde birden fazla ifade yapmanız gerekiyorsa, bu örnekte kuyruğu küme parantezleri () içine almanız gerekir. Bu durumda return ifadesi atlanamaz.

const kuyruk = ["Dave", "Sarah", "Sharon"]; const addCustomer = isim => ( kuyruk.push(isim); ); addCustomer("Toby"); console.log(kuyruk); // ["Dave", "Sarah", "Sharon", "Toby"]

Yukarıdakilerden () öğesini çıkartabilirsiniz.

Tek bir parametre olduğunda, parametrenin etrafındaki parantezler () atlanabilir.

const addNumbers = (x, y) => x + y console.log(addNumbers(1, 5)); // 6

Her meyvenin fiyatını tek bir dizide bulmak istiyorsak ES5'te şunu yapabiliriz:

Fruits.map(function(meyve) ( return meyve.fiyat; )); //

ES6'da yeni ok işlevleriyle bunu daha kısa hale getirebiliriz:

Meyveler.map(meyve => meyve.fiyat); //

Ok işlevleri hakkında daha fazla bilgi bulunabilir.

• IE: henüz desteklenmiyor
• Kenar: 12+ (Tüm sürümler)
• Firefox: 22+
• Krom: 45+
• Safari: 10+
• iOS Safari: 10.2+
• Android tarayıcısı: 56+

Daha güncel tarayıcı uyumluluğu bilgileri için lütfen şu adresi ziyaret edin:

Diğerlerinin de söylediği gibi bu, işlevler oluşturmaya yönelik yeni bir sözdizimidir.

Ancak bu tür bir işlev normal olanlardan farklıdır:

Bunun değerini bağlıyorlar. Spesifikasyonun açıkladığı gibi,

ArrowFunction, super, this veya new.target argümanları için yerel bağlamaları tanımlamaz. Bir ArrowFunction içindeki argümanlara, super, this veya new.target'e yapılan herhangi bir başvuru, sözcüksel ortamdaki bağlamayı çözer. Tipik olarak bu, hemen bir işleve sahip işlevsel bir ortam olacaktır.

ArrowFunction super öğesine başvurular içerse de, 4. adımda oluşturulan işlev nesnesi MakeMethod yürütülerek bir yönteme dönüştürülmez. super'a başvuran bir ArrowFunction her zaman ok olmayan bir fonksiyon içinde bulunur ve super'in gerekli uygulamasına ArrowFunction fonksiyon nesnesi tarafından yakalanan kapsam aracılığıyla erişilebilir.

• Yapıcı değildirler.

  Bu, dahili bir [] yöntemine sahip olmadıkları ve bu nedenle örneklenemeyecekleri anlamına gelir; örneğin

  Var f = a => a; f(123); // 123 yeni f(); // TypeError: f bir kurucu değil

Okla basit bir CRUD örneği ekleme

//Arrow Fonksiyonu var müşteriler = [ ( name: "Dave", contact: "9192631770" ), ( name: "Sarah", contact: "9192631770" ), ( name: "Akhil", contact: "9928462656" )] , // Param Yok READ getFirstCustomer = () => ( console.log(this); return customer; ); console.log("İlk Müşteri "+JSON.stringify(getFirstCustomer())); // "Dave" //1 Param SEARCH getNthCustomer = index=>( if(index>customers.length) ( return "Böyle bir şey yok"; ) else( return customer; ) ); console.log("N'inci Müşteri: " +JSON.stringify(getNthCustomer(1))); //2params ADD addCustomer = (isim, ilgili kişi)=> müşteriler.push(( "isim": isim, "ilgili kişi":iletişim )); addCustomer("Hitesh", "8888813275"); console.log("Müşteri Eklendi "+JSON.stringify(müşteriler)); //2 param GÜNCELLEME updateCustomerName = (index, newName)=>(customers.name= newName); updateCustomerName(müşteriler.uzunluk-1,"HiteshSahu"); console.log("Müşteri Güncellendi "+JSON.stringify(müşteriler)); //1 param DELETE RemoveCustomer = (customerToRemove) => customer.pop(customerToRemove); RemoveCustomer(getFirstCustomer()); console.log("Müşteri Kaldırıldı "+JSON.stringify(müşteriler));

Diğer tüm yanıtlar gibi bu da ES2015 işlev sözdiziminin bir parçasıdır. Spesifik olarak, bu bir operatör değil, parametreleri gövdeden ayıran bir belirteç belirtecidir: ArrowFunction: ArrowParameters => ConciseBody . Örneğin. (paramlar) => ( /* gövde */ ) .

Javascript'te => sembolü bir ok fonksiyonu ifade sembolüdür. Bir ok işlevi ifadesinin kendine ait bu bağlaması yoktur ve bu nedenle yapıcı işlevi olarak kullanılamaz. Örneğin:

var words = "dışarıdaki nesneden merhaba"; let obj = ( words: "nesnenin içinden merhaba", talk1: () => (console.log(this.words)) talk2: function () (console.log(this.words)) ) obj.talk1( ); // kendine ait bu bağlamaya sahip değil, bu === window obj.talk2(); // kendine ait bu bağlamaya sahip, bu obj

• Yalnızca bir bağımsız değişken varsa, bağımsız değişken parantezlerini atlayabilirsiniz.
• Bir ifadeyi döndürürseniz ve bunu aynı satırda yaparsanız, () ve return ifadesini atlayabilirsiniz.

Örneğin:

let kere2 = val => val * 2; // Aynı satırdadır ve bir ifade döndürür, bu nedenle () işlenir ve ifade örtülü olarak döner // ayrıca yalnızca bir argüman vardır, bu nedenle argümanın etrafındaki parantezler atlanır console.log(times2(3));

Diğer cevaplardan memnun değilim. 2019/3/13 tarihinde en çok oy alan yanıt aslında yanlıştır.

=> ne anlama geldiğinin kısa ve öz versiyonu, bir fonksiyon yazmak ve onu mevcut this ile ilişkilendirmek için bir kısayoldur.

Sabit foo = a => a * 2;

Etkili bir şekilde kısayol

Const foo = function(a) ( return a * 2; ).bind(this);

Kesilen her şeyi görebilirsiniz. function , return , .bind(this) , parantez veya parantezlere ihtiyacımız yok

Ok fonksiyonunun biraz daha uzun bir örneği şu şekilde olabilir:

Const foo = (genişlik, yükseklik) => ( const alan = genişlik * yükseklik; dönüş alanı; );

Birden fazla işlev argümanına ihtiyacımız varsa parantezlere ihtiyacımız olduğu, birden fazla ifade yazmak istiyorsak küme parantezlerine ve açık bir return'e ihtiyacımız olduğu gösterilmiştir.

.bind kısmını anlamak önemlidir ve bu büyük bir konudur. Bunun JavaScript'te ne anlama geldiğiyle ilgisi var.

TÜM işlevler this adında örtülü bir parametreye sahiptir. Bir işlev çağrılırken bunun nasıl ayarlanacağı, işlevin nasıl çağrıldığına bağlıdır.

kabul etmek

foo() işlevi ( console.log(this); )

Eğer onu çağırırsan tamam

Function foo() ( console.log(this); ) foo();

bu küresel bir nesne olacak.

Katı moddaysanız

"katı kullanın"; function foo() ( console.log(this); ) foo(); // veya foo() işlevi ( "katı kullanım"; console.log(bu); ) foo();

Tanımsız olacak

Bunu doğrudan aramayı veya uygulamayı kullanarak ayarlayabilirsiniz.

Function foo(msg) ( console.log(msg, this); ) const obj1 = (abc: 123) const obj2 = (def: 456) foo.call(obj1, "merhaba"); // Merhaba (abc: 123) foo.apply(obj2, ["hi"]); yazdırır // Merhaba yazdırır (tanım: 456)

Bunu nokta operatörünü kullanarak örtülü olarak da ayarlayabilirsiniz.

Function foo(msg) ( console.log(msg, this); ) const obj = ( abc: 123, bar: foo, ) obj.bar("Hola"); // Hola'yı yazdırır (abc:123, bar: f)

Sorun, bir işlevi geri arama veya dinleyici olarak kullanmak istediğinizde ortaya çıkar. Bir sınıf oluşturuyorsunuz ve sınıfın bir örneğine erişen bir işlevi geri çağırma olarak atamak istiyorsunuz.

Sınıf ShowName ( yapıcı(isim, elem) ( this.name = isim; elem.addEventListener("tıklayın", function() ( console.log(this.name); // çalışmaz )); ) )

Yukarıdaki kod çalışmayacaktır çünkü öğe olayı yükselttiğinde ve işlevi çağırdığında bu değer sınıfın bir örneği olmayacaktır.

Bu sorunu çözmenin yaygın yollarından biri .bind kullanmaktır.

Sınıf ShowName ( yapıcı(isim, elem) ( this.name = isim; elem.addEventListener("tıkla", function() ( console.log(this.name); .bind(this); // ( console.log (bu isim);

bağlama etkili bir şekilde yeni bir işlev yapar. Eğer ciltleme mevcut olmasaydı, kendinizinkini bu şekilde yapabilirsiniz

Function bind(funcitonToBind, valueToUseForThis) ( return function(...args) ( functionToBind.call(valueToUseForThis, ...args); )

Spread operatörü olmayan eski JavaScript'te bu şöyle olurdu:

Function bind(funcitonToBind, valueToUseForThis) ( return function() ( functionToBind.apply(valueToUseForThis, argümanlar); )

Kodun anlaşılması, kapanışların anlaşılmasını gerektirir, ancak bağlamanın kısa sürümü, her zaman orijinal işlevi kendisine bağlı this değeriyle çağıran yeni bir işlev oluşturur. Ok işlevi aynı şeyi yapar çünkü bunlar bağlanmak için bir kısayoldur(bu)

(=>) simgesiyle temsil edilen işlev oku, anonim işlevler ve yöntemler oluşturmanıza yardımcı olur. Bu daha kısa söz dizimi ile sonuçlanır. Örneğin, aşağıda iki sayının toplamını döndüren basit bir Ekleme işlevi bulunmaktadır.

İşlev Ekle(sayı1 , sayı2)( dönüş sayı1 + sayı2; )

Yukarıdaki işlev, aşağıda gösterildiği gibi Arrow sözdizimi kullanılarak kısaltılır.

Yukarıdaki kod, yukarıdaki resimde gösterildiği gibi iki bölümden oluşmaktadır:

Giriş: - Bu bölüm anonim işlev için giriş parametrelerini belirtir.

Mantık: - Bu bölüm "=>" sembolünden sonra gelir. Bu bölümde asıl fonksiyonun mantığı bulunmaktadır.

Pek çok geliştirici, ok işlevinin sözdiziminizi daha kısa ve basit hale getirdiğine ve dolayısıyla kodunuzu okunabilir hale getirdiğine inanıyor.

Yukarıdaki cümleye inanıyorsanız, sizi temin ederim ki bu bir efsanedir. Bir an düşünürseniz, isimle düzgün yazılmış bir fonksiyonun, tek satırda ok sembolü kullanılarak oluşturulan şifreli fonksiyonlardan çok daha okunaklı olduğunu görürsünüz.

Ok fonksiyonunun ana kullanımı, kodun arayanların bağlamında yürütülmesini sağlamaktır.

Aşağıdaki genel değişken "bağlam"ı tanımlayan koda bakın; bu genel değişkene başka bir "SomeMethod" yönteminden çağrılan "SomeOtherMethod" işlevi içinden erişilebilir.

Bu SomeMethod'un yerel bir bağlam değişkeni var. Artık SomeOtherMethod, "SomeMethod"dan çağrıldığından, "yerel bağlamı" görüntülemesini bekliyoruz, ancak "genel bağlamı" görüntülüyor.

Var bağlamı = "genel bağlam"; function SomeOtherMethod())( warning(this.context); ) function SomeMethod())( this.context = "yerel bağlam"; SomeOtherMethod(); ) var örnek = new SomeMethod();

Ancak çağrıyı bir ok işleviyle değiştirirseniz "yerel bağlam" görüntülenecektir.

Var bağlamı = "genel bağlam"; function SomeMethod())( this.context = "yerel bağlam"; SomeOtherMethod = () => ( warning(this.context); ) SomeOtherMethod(); ) var örnek = new SomeMethod();

Tüm javascript bağlam senaryolarını açıklayan ve hangi durumlarda arayanın bağlamına uyulmadığını açıklayan bu bağlantıyı (JavaScript'te Ok işlevi) okumanızı tavsiye ederim.

Demoyu da görebilirsiniz Bu YouTube videosunda javascript ile ok fonksiyonları, bu da Bağlam terimini pratik olarak göstermektedir.

• Tercüme

Ok işlevleri olarak da bilinen şişman ok işlevleri (=>), ECMAScript 2015'teki (eski adıyla ES6 olarak bilinen) tamamen yeni bir işlevselliktir. Söylentilere inanılacak olursa, ECMAScript 2015'te CoffeeScript'in etkisiyle –> sözdizimi yerine => sözdizimi kullanılmaya başlandı. Ayrıca bağlamın benzerliği de bunu aktarıyor.

Ok işlevlerinin iki ana amacı vardır: daha kısa bir sözdizimi sağlamak; Sözcüksel olarak bunun ana kapsamla iletildiğinden emin olun. Her birine daha yakından bakalım!

• Geri çağırma fonksiyonlarımız tek satıra yazıldığından fonksiyon ve () fonksiyonlarını kaybettik.
• () öğesini kaldırdık. Artık yalnızca bir bağımsız değişken mevcut olduğunda bağımsız değişken listesini sarmalamıyorlar (diğer bağımsız değişkenler istisna olarak iletilir; örneğin, (...args) => ...).
• Return anahtar sözcüğünden kurtulduk. () öğesini kaldırarak, tek satırlık ok işlevlerinin örtülü bir dönüş gerçekleştirmesine izin veririz (diğer dillerde bu tür işlevlere genellikle lambda işlevleri denir).

Ancak önemli bir dezavantaj var: ok işlevlerinden () öğesini kaldırarak boş bir nesneyi nasıl döndürebiliriz? Örneğin, aynı ()?
const emptyObject = () => (); emptyObject(); // ?
Ve işte tüm kod bir arada şöyle görünüyor:
fonksiyon () ( dönüş 1; ) () => ( dönüş 1; ) () => 1 fonksiyon (a) ( dönüş a * 2; ) (a) => ( dönüş a * 2; ) (a) => a * 2 a => a * 2 fonksiyon (a, b) ( dönüş a * b; ) (a, b) => ( dönüş a * b; ) (a, b) => a * b fonksiyon () ( argümanları döndür; ) (...args) => argümanlar () => () // tanımsız () => (()) // ()

• Hemen dönen tek ifadeli işlevler;
• bununla çalışması gereken işlevler ana kapsam ile.