ES6 hemen çalıştırılan ok işlevi

Bu neden bir Node.jskonsolda çalışıyor (4.1.1 ve 5.3.0'da test edildi) ancak tarayıcıda çalışmıyor (Chrome'da test edildi)? Bu kod bloğu, günlüğe kaydedilen anonim bir işlev oluşturmalı ve çağırmalıdır Ok.

() => {
  console.log('Ok');
}()

Ayrıca, yukarıda iken eserlerinde Düğüm içinde, bu işe yaramazsa:

n => {
  console.log('Ok');
}()

Ne de bu:

(n) => {
  console.log('Ok');
}()

Garip olan şey, parametre eklendiğinde SyntaxErrorhemen çağrılan kısma a atar .

Bir isme ihtiyaç duymayan ve geçerli bir JavaScript yapan işlev tanımı yerine bir işlev ifadesi yapmanız gerekir.

(() => {
  console.log('Ok');
})()

IIFE'ye eşdeğerdir

(function(){
   console.log('Ok')
})();

Bunun Node.js'de çalışmasının ancak kromda çalışmamasının olası nedeni, ayrıştırıcının onu kendi kendini yürütme işlevi olarak yorumlamasıdır.

function() { console.log('hello'); }();

içinde çalışıyor Node.jsBu fonksiyon ifadesi ve krom ve firefox ve tarayıcı yorumladığını çoğu bu yoldur. Manuel olarak çağırmanız gerekir.

Ayrıştırıcıya bir işlev ifadesi beklemesini söylemenin en yaygın olarak kabul edilen yolu, ifadeyi yalnızca çözüm ortaklarına sarmaktır, çünkü JavaScript'te çözüm ortakları ifadeler içeremez. Bu noktada, ayrıştırıcı işlev anahtar sözcüğüyle karşılaştığında, bunu işlev bildirimi olarak değil bir işlev ifadesi olarak ayrıştırmayı bilir.

İlgili parametrized sürümü , bu işe yarar.

((n) => {
  console.log('Ok');
})()

Bunların hiçbiri parantez olmadan çalışmamalıdır.

Neden?

Çünkü spec göre:

1. ArrowFunction , Atama İfadesi altında listelenir
2. A LHS CallExpression a olmalıdır MemberExpression , SuperCall veya CallExpression

Yani bir ArrowFunction a lhs olamaz CallExpression .

Bunun etkili bir nasıl gelir =>, yorumlanması gerektiği o atama operatörleri olarak düzeyinin aynı türden çalışır olmasıdır =, +=vb

anlam

• x => {foo}() vermez hale(x => {foo})()
• Tercüman bunu x => ({foo}())
• Bu yüzden hala bir SyntaxError
• Böylece tercüman, (yanlış olması gerektiğine karar verir ve bir SyntaxError atar

Bu konuda Babel'de bir hata oluştu burada da.

Bunun gibi sorunları görmenizin nedeni, konsolun kendisinin şu anda hedeflediğiniz bağlamın küresel kapsamını taklit etmeye çalışmasıdır. Ayrıca, konsolda yazdığınız ifadelerden ve ifadelerden gelen dönüş değerlerini yakalamaya çalışır, böylece sonuç olarak görünür. Örneğin şunu ele alalım:

> 3 + 2
< 5

Burada, sanki bir ifademiş gibi çalışır, ama siz bir ifademiş gibi yazmışsınızdır. Normal komut dosyalarında değer atılır, ancak burada kod dahili olarak yönetilmelidir (tüm ifadeyi bir işlev bağlamı ve bir returnifade ile sarmak gibi ), bu da yaşadığınız sorunlar da dahil olmak üzere her türlü garip etkiye neden olur.

Bu, komut dosyalarındaki bazı çıplak ES6 kodunun iyi çalışmasının, ancak Chrome Dev Tools konsolunda çalışmamasının nedenlerinden biridir.

Bunu Düğüm ve Chrome konsolunda yürütmeyi deneyin:

{ let a = 3 }

Düğümde veya bir <script>etikette iyi çalışır, ancak konsolda verir Uncaught SyntaxError: Unexpected identifier. Ayrıca VMxxx:1, değerlendirilen kaynağı incelemek için tıklayabileceğiniz şekilde kaynağa bir bağlantı verir, bu da şu şekilde görünür:

({ let a = 3 })

Peki bunu neden yaptı?

Cevap, sonucun arayana geri dönüp konsolda görüntülenebilmesi için kodunuzu bir ifadeye dönüştürmesi gerektiğidir. Bunu, ifadeyi bir ifade yapan parantez içinde sararak yapabilirsiniz, ancak yukarıdaki bloğu sözdizimsel olarak yanlış yapar (bir ifadenin blok bildirimi olamaz).

Konsol, kod hakkında akıllı olarak bu uç durumları düzeltmeye çalışıyor, ancak bu cevabın kapsamı dışında olduğunu düşünüyorum. Düzeltmeyi düşünecekleri bir şey olup olmadığını görmek için bir hata dosyası gönderebilirsiniz.

Çok benzer bir şeye iyi bir örnek:

https://stackoverflow.com/a/28431346/46588

Kodunuzu çalıştırmanın en güvenli yolu, bir ifade olarak çalıştırılabildiğinden emin olmak SyntaxErrorve gerçek yürütme kodunun ne olduğunu görmek için kaynak bağlantısını incelemek ve bundan bir çözüm tasarlamaktır. Genellikle bir çift stratejik olarak yerleştirilmiş parantez anlamına gelir.

Kısacası: konsol global yürütme bağlamını olabildiğince doğru bir şekilde taklit etmeye çalışır, ancak v8 motoru ve JavaScript semantiği ile etkileşimin sınırlamaları nedeniyle, bazen çözülmesi zor veya imkansızdır.

Böyle bir soru sordum:

@getify Şu soruyu soruyorum: #IIFE kalıbı üretmek için, bir işlev bildirimi etrafında bir işlev ifadesine dönüştürmek ve sonra çağırmak için parans kullanırız. Şimdi ok işlevi IIFE'lerde, neden paralara ihtiyacımız var ?! Ok işlevi varsayılan olarak zaten bir ifade değil mi ?!

ve bu Kyle Simpson'ın cevabı:

bir ok fonksiyonu olan bir ifade, ama biz son parens ok-Hayatta tüm fonksiyona geçerli çağırmak değil onun vücudunun sadece geçen jetonuyla o, b / c "operatör öncelik" (sorta) çevreleyen parens ihtiyaç .

x => console.log(x)(4)

vs

(x => console.log(x))(4)

- getify (@getify) 12 Haziran 2020