Функция стрелки является одним из самых популярных обновлений в Ecmascript 6. Она вводит новый синтаксис для определения функций с использованием «Стрелка» (=>), оно ... это бункер ~. Основные различия между функциями со стрелками и традиционными функциями JavaScript заключаются в следующем:
1. Отношение к этому. Значение этого встроено, в зависимости от того, где определяется функция стрелки, а не контекст, в котором выполняется функция стрелки.
2.new недоступен. Функция стрелки не может использовать новое ключевое слово для создания объекта, в противном случае будет сообщена ошибка.
3. Это неизбежно. Это встроено для функционирования и является постоянной во всей среде выполнения в корпусе функции.
4. Нет аргументов. Входящие параметры не могут быть доступны через объект аргументов. Это может быть сделано только с помощью явных именования или других новых функций ES6.
Существование этих различий является разумным. Во -первых, обязательство к этому является одним из распространенных источников ошибок JavaScript. Легко потерять встроенные значения функций или получить неожиданные результаты. Во -вторых, ограничение функции стрелки использованием фиксированной этой ссылки способствует обработке оптимизации двигателя JavaScript.
1. Синтаксис
Синтаксис функции стрелки прост, определяя независимые переменные, затем корпус стрелки и функции. Независимые переменные и темы могут использоваться в более кратком формате из -за различного использования. Следующим примером является функция стрелки, которая передает параметр и возвращает значение.
Кода -копия выглядит следующим образом:
var Refert = value => value;
// эквивалентно:
var Refert = function (value) {
возвращаемое значение;
};
Видно, что вы можете просто написать параметр, передав его, не добавляя кронштейны. Стрелка указывает на корпус функции, но корпус функции - это просто простое возвратное утверждение, поэтому нет необходимости добавлять брекеты. После того, как функция построена, она назначена для отражения и ссылки.
Если необходимо перенести несколько параметров, должны быть добавлены кронштейны. Например:
Кода -копия выглядит следующим образом:
var sum = (num1, num2) => num1 + num2;
// эквивалентно:
var sum = function (num1, num2) {
вернуть num1 + num2;
};
Метод sum () состоит в том, чтобы добавить два параметра и передать результат обратно. Единственное отличие от предыдущего примера состоит в том, что в скобках передаются два параметра, поэтому они должны быть заключены в скобки. Это как традиционные функции, с запятыми в скобках, разделенных на параметры. Точно так же, если функция не должна проходить в параметрах, ее также следует заменить пустыми кронштейнами.
Кода кода следующая: var sum = () => 1 + 2;
// эквивалентно:
var sum = function () {
вернуть 1 + 2;
};
Если вы хотите использовать стандартный корпус функции, или в корпусе функции может быть больше операторов, приложите корпус функции в скобки и четко определите возвратное значение. Например:
Кода -копия выглядит следующим образом:
var sum = (num1, num2) => {return num1 + num2; }
// эквивалентно:
var sum = function (num1, num2) {
вернуть num1 + num2;
};
Часть в скобках в основном эквивалентна традиционным функциям, за исключением того, что параметр аргументов недоступен.
Потому что брекеты являются логотипом тела функции. Если функция стрелки хочет вернуть пользовательский объект, она должна сначала приложить объект в скобки. Например:
Кода -копия выглядит следующим образом:
var getTempitem = id => ({
я сделал,
Имя: "Темп"
});
// эквивалентно:
var getTempitem = function (id) {
возвращаться {
я сделал,
Имя: "Темп"
};
};
Как видно из приведенного выше примера, использование кронштейнов для включения кудрявых кронштейнов является определением объекта, а не телом функции.
2. Используйте
Одной из наиболее распространенных ошибок в JavaScript является эта ассоциация внутри функции. Поскольку это принимает значение в соответствии с текущей средой выполнения функции, оно вызвет недоразумения при вызове, что приводит к влиянию на другие не связанные с ними объекты. См. Следующий пример:
Кода -копия выглядит следующим образом:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventlistener ("click", function (event) {
this.dosomething (event.type); // ошибка
}, ЛОЖЬ);
},
Dosomething: function (type) {
console.log ("обработка" + type + "для" + this.id);
}
};
В этом коде исходное намерение состоит в том, чтобы позволить методу init PageHandler () init () использоваться для создания взаимодействий и вызовов это. Тем не менее, код не выполняется в соответствии с исходным дизайнерским намерением. Во время выполнения это указывает на глобальный объект вместо Pagehandler, который вызывает это вызов () для признания недействительной, и возникает ошибка, потому что метод Dosomething не существует в глобальном объекте.
Конечно, вы можете использовать Bind () в функции, чтобы явно связать это с PageHandler, см. Ниже:
Кода -копия выглядит следующим образом:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventlistener ("click", (function (event) {
this.dosomething (event.type);
}). Bind (this), false);
},
Dosomething: function (type) {
console.log ("обработка" + type + "для" + this.id);
}
};
Хотя это выглядит немного странно, выполнение кода теперь соответствует ожиданиям. Призывая привязку (это) функции новой функцией, которая была связана с существующим, создается это, что означает, что другой слой включен для достижения этой цели.
Поскольку функция стрелки уже поддерживает эту ассоциацию, будет более освежающе использовать функцию стрелки здесь. См. Следующий пример:
Кода -копия выглядит следующим образом:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventlistener ("щелкнуть",
event => this.dosomething (event.type), false);
},
Dosomething: function (type) {
console.log ("обработка" + type + "для" + this.id);
}
};
Функция обработки событий в этом экземпляре вызывает функцию стрелки этого. Dosomething (). Значение этого - значение этого init (). Следовательно, это эквивалентно bind ().
Краткий и краткий характер функций стрел также делает его идеальным выбором для других независимых переменных функции. Например, для использования пользовательского компаратора для распоряжения массивов на ES5 см. Типичный код ниже:
Кода -копия выглядит следующим образом:
var result = values.sort (function (a, b) {
вернуть A - B;
});
Приведенный выше пример использует много синтаксиса для реализации простой работы. Если вы используете функции стрелки, вы можете написать очень изысканный код:
Кода -копия выглядит следующим образом:
var result = values.sort ((a, b) => a - b);
Сорт/карта/уменьшение методов массивов поддерживает функции обратного вызова. Использование функций стрелки может упростить процесс написания и освободить руки, чтобы делать то, что вы хотите.
3. Дополнение
Функции стрел действительно отличаются от традиционных функций, но они все еще имеют общие характеристики. Например:
1.
2. Функция стрелки по -прежнему является экземпляром функции, поэтому метод выполнения экземпляра согласуется с функцией традиционных функций.
3.call/apply/bind по -прежнему применим к функциям стрел, но даже если эти методы вызваны для расширения текущей области, это не изменится.
Самая большая разница между функциями со стрелками и традиционными функциями заключается в том, что новые операции отключены.
4. Заключение
Функция стрелки - это новая особенность Ecmascript 6, которая привлекла большое внимание и постоянно оптимизируется. Это общая тенденция использовать краткую грамматику для определения процесса написания функций или утверждений, и они, несомненно, будут непобедимыми, и никто не сможет их остановить. Его связь с ключевым словом это заставляет разработчиков больше не раздражать и оптимизировать его для повышения производительности с помощью двигателя JavaScript. Говоря об этом, мои друзья уже жаждут. Если вы хотите попробовать функцию стрелки, просто откройте последнюю версию Firefox.