Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

JS Учебник


JS Версии


JS Объекты


JS Функции


JS Классы


JS Асинхронный


JS HTML DOM


JS Браузер BOM


JS Веб APIы


JS AJAX


JS JSON


JS или jQuery


JS Графика


JS Примеры


JS Рекомендация




JavaScript Функция стрелок



Стрелочные функции были введены в ES6.

Функции стрелок были введены в ES6, они позволяют писать более короткий синтаксис функции:

До:

hello = function() {
return "Hello World!";
}
Попробуйте сами »

С функцией стрелки:

hello = () => {
return "Hello World!";
}
Попробуйте сами »

Становится короче! Если функция имеет только одино оператор, и оператор возвращает значение, вы можете удалить скобки и у return ключевого слова:

Стрелочные фунции возвращают значение по умолчанию:

hello = () => "Hello World!";
Попробуйте сами »

Примечание: это работает, только если функция имеет одни оператор.

Если у вас есть параметры, вы передаете их в круглых скобках:

Функция стрелок с параметрами:

hello = (val) => "Hello " + val;
Попробуйте сами »

Фактически, если у вас есть только один параметр, вы также можете пропустить круглые скобки:

Функция стрелок без параметров:

hello = val => "Hello " + val;
this Попробуйте сами »

Как насчет this?

Обработка this, также отличается в функциях стрелок по сравнению от обычных функций.

Короче говоря, с функциями стрелок нет привязки к this.

В обычных функциях ключевое слово this представляет объект, который вызывает функцию, которая может быть окном, документом, кнопкой или чем-то ещё.

С помощью функций стрелок ключевое слово this всегда представляет объект, который определяет функцию стрелки.

Давайте взглянем на два примера, чтобы понять разницу.

В обоих примерах метод вызывается дважды: сначала при загрузке страницы, и еще раз, когда пользователь нажимает кнопку.

В первом примере используется обычная функция, а во втором - стрелочная функция.

Результат показывает, что первый пример возвращает два разных объекта (window и button), а второй пример возвращает объект window дважды, потому что объект window является "владельцем" функции.

Пример

С помощью обычной функции this представляет объект, который вызывает функцию:

// Функция обычная:
hello = function() {
document.getElementById("demo").innerHTML += this;
}

// Объект окна вызывает функцию::
window.addEventListener("load", hello);

// Объект кнопки вызывает функцию:
document.getElementById("btn").addEventListener("click", hello);
Попробуйте сами »
Пример

Со стрелкой this представляет владельца функции:

// Функция стрелок:
hello = () => {
document.getElementById("demo").innerHTML += this;
}

// Объект окна вызывает функцию:
window.addEventListener("load", hello);

// Объект кнопки вызывает функцию:
document.getElementById("btn").addEventListener("click", hello);
Попробуйте сами »

Помните об этих различиях при работе с функциями. Иногда поведение обычных функций - это то, что вам нужно, если нет, используйте стрелочные функции.



Поддержка браузера

В следующей таблице определены первые версии браузеров с полной поддержкой стрелочных функций в JavaScript:

Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Sep, 2015 Jul, 2015 May, 2013 Sep, 2016 Sep, 2015


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.