ES6 негайно викликав функцію стрілки

Чому це працює в Node.jsконсолі (тестовано в 4.1.1 і 5.3.0), але не працює в браузері (тестується в Chrome)? Цей блок коду повинен створювати та викликати анонімну функцію, яка веде журнал Ok.

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

Крім того, хоча вищезгадане працює в Node, це не працює:

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

Ні це:

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

Що дивно, що коли доданий параметр, він фактично викидає SyntaxErrorна частину, що викликається негайно.

Вам потрібно зробити це виразом функції замість визначення функції, яке не потребує імені та робить його дійсним JavaScript.

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

Є еквівалентом IIFE

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

І можлива причина, чому це працює в Node.js, але не в chrome, полягає в тому, що його аналізатор інтерпретує його як функцію самовиконання, як це

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

прекрасно працює Node.jsЦе вираження функції та chrome та firefox, і більшість браузерів інтерпретує це так. Викликати його потрібно вручну.

Найпоширеніший спосіб сказати аналізатору очікувати виразу функції - це просто загортати його в парени, оскільки в JavaScript паролі не можуть містити заяви. У цей момент, коли аналізатор стикається з ключовим словом функції, він знає, що він розбирає його як вираз функції, а не декларацію функції.

Щодо параметризованої версії , то це спрацює.

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

Жодне з них не повинно працювати без дужок.

Чому?

Тому що відповідно до специфікації:

1. ArrowFunction знаходиться в списку під ВираженіяПрісваіваніем
2. У LHS з в значенні вкладеного ВираженіяCall повинна бути MemberExpression , SuperCall або значення вкладеного ВираженіяCall

Таким чином, ArrowFunction не може бути на LHS CallExpression .

Те , що це фактично означає , в тому , як =>слід інтерпретувати, що він працює на такий же рівень , як оператори присвоювання =, і +=т.д.

Значення

• x => {foo}() не стає(x => {foo})()
• Перекладач намагається його інтерпретувати як x => ({foo}())
• Таким чином, це все ще SyntaxError
• Тож перекладач вирішує, що, (мабуть, помилився, і кидає SyntaxError

Про Вабеля тут також була помилка .

Причина, з якою ви бачите подібні проблеми, полягає в тому, що сама консоль намагається імітувати глобальну сферу контексту, на який ви зараз орієнтовані. Він також намагається зафіксувати повернені значення з висловлювань та виразів, які ви записуєте в консоль, щоб вони відображалися як результати. Візьмемо, наприклад:

> 3 + 2
< 5

Тут він виконується так, ніби це був вираз, але ви це написали так, ніби це був вислів. У звичайних сценаріях значення буде відкинуто, але тут код повинен бути внутрішньо налаштований (як, наприклад, загортання всього оператора в контекст функції та returnвисловлювання), що викликає всілякі дивні ефекти, включаючи проблеми, які виникають.

Це також одна з причин того, що якийсь голий код ES6 у скриптах працює добре, але не працює на консолі інструментів Chrome Dev Tools.

Спробуйте виконати це в консолі Node та Chrome:

{ let a = 3 }

У Node або <script>тезі він працює чудово, але в консолі він дає Uncaught SyntaxError: Unexpected identifier. Він також дає вам посилання на джерело, у формі VMxxx:1якого ви можете натиснути, щоб оглянути оцінюване джерело, яке відображається як:

({ let a = 3 })

То чому це зробив?

Відповідь полягає в тому, що потрібно перетворити ваш код у вираз, щоб результат міг бути повернений абоненту і відображений у консолі. Ви можете зробити це, загорнувши оператор у круглі дужки, що робить його виразом, але він також робить блок вище синтаксично неправильним (вираз не може мати блокове оголошення).

Консоль намагається виправити ці крайові випадки, розуміючи код, але я думаю, що це виходить за межі цієї відповіді. Ви можете подати помилку, щоб побачити, чи це те, що вони могли б вирішити як виправити.

Ось хороший приклад чогось дуже схожого:

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

Найбезпечніший спосіб зробити ваш код - це переконатися, що він може бути запущений як вираз, і перевірити SyntaxErrorвихідне посилання, щоб побачити, що таке фактичний код виконання, і реверсувати рішення з цього рішення. Зазвичай це означає пару стратегічно розміщених дужок.

Якщо коротко: консоль намагається імітувати глобальний контекст виконання якомога точніше, але через обмеження взаємодії з двигуном v8 та семантикою JavaScript це вирішити важко або неможливо.

Я задав таке питання:

@getify У мене це питання: для створення шаблону #IIFE ми використовуємо параметри навколо оголошення функції, щоб перетворити його у вираз функції та потім викликати його. Тепер у стрілці функціонує IIFE, навіщо нам потрібні лопатки ?! Хіба функція стрілки вже не є виразом за замовчуванням ?!

і це відповідь Кайла Сімпсона:

функція стрілки є expr, але нам потрібні оточуючі паролі b / c "пріоритету оператора" (сорта), так що остаточні паролі для виклику стрілки-IIFE стосуються всієї функції, а не лише останнього маркера її тіла .

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

проти

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

- getify (@getify) 12 червня 2020 року