machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Руководство по объявлениям функций, выражениям функций и функциям стрелок в JavaScript

Дата публикации Oct 3, 2019

Функции стрелок - это новая функция в JavaScript, появившаяся в ES6 в 2015 году. Они представляют собой сокращенное обозначение, построенное на основе выражений функций, и вам не нужно писатьfunctionснова и снова.

Как напоминание, выражения функций являются анонимными функциями, то есть они не имеют имени и не могут быть доступны после создания. Мы можем назначить выражения функции для переменной, чтобы потом вызывать функцию или использовать выражение функции в качестве обратного вызова.

Я нахожу функции стрелок очень запутанными, так что есть лучший способ понять их лучше, чем написать блог, сравнивающий объявления функций, выражения функций и функции стрелок.

Два основных различия связаны с синтаксисом и контекстом выполнения (this).

Синтаксис

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

//function declaration
function sayHello() {
console.log("Hello from Flatiron School")
}//function expression
let sayHello = function() {
console.log("Hello from Flatiron School")
}//arrow function
let sayHello = () => console.log("Hello from Flatiron School")//function invocation (same for all)
sayHello()
// => Hello from Flatiron School (logged to console)

Функции с одним параметром

//function declaration
function sayHelloFromName(name) {
console.log(`Hello from ${name}`)
}//function expression
let sayHelloFromName = function(name) {
console.log(`Hello from ${name}`)
}//arrow function
let sayHelloFromName = name => console.log(`Hello from ${name}`)//arrow function
let sayHelloFromName = (name) => console.log(`Hello from ${name}`)//function invocation (same for all)
sayHelloFromName("Amy")
// => Hello from Amy (logged to console)

Если в функции стрелки есть только один параметр, скобки вокруг параметра становятся необязательными.

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

//function declaration
function myAdd(num1, num2) {
return num1 + num2
}//function expression
let myAdd = function(num1, num2) {
return num1 + num2
}//arrow function
let myAdd = (num1, num2) => num1 + num2//function invocation (same for all)
myAdd(1,2)
// => 3

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

let myAdd = (num1, num2) => {
return num1 + num2
}

Функции с более чем одним выражением

//function declaration
function myLongAdd(num1, num2) {
let sum = num1 + num2
return sum
}//function expression
let myLongAdd = function(num1, num2) {
let sum = num1 + num2
return sum
}//arrow function
let myLongAdd = (num1, num2) => {
let sum = num1 + num2
return sum
}//function invocation (same for all)
myLongAdd(1,2)
// => 3

Если в функции со стрелкой имеется более одного выражения, вокруг выражения требуются фигурные скобки, и результатненеявно возвращается, вы должны явно вернуться.

Использовать с итераторами

//function expression
const numArr = [1,2,3]
const numSquares = numArr.map(function(num) {
return num * num
})
// => [1,4,9]//arrow function
const numArr = [1,2,3]
const numSquares = numArr.map(num => num * num)
// => [1,4,9]

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

Контекст выполнения

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

Регулярные функции

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

function sayThis() {
console.log(this)
}let sayThisExpr = function() {
console.log(this)
}const amy = {
name: "Amy",
age: 25,
sayThis: sayThis,
sayThisExpr: sayThisExpr
}sayThis()
//shorthand for window.sayThis()
// => Window object (logged to console)sayThisExpr()
//shorthand for window.sayThisExpr()
// => Window object (logged to console)amy.sayThis()
// => amy object (logged to console)amy.sayThisExpr()
// => amy object (logged to console)

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

Вложенные функции

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

Есть несколько способов обойти это в зависимости от сценария, включая использованиеthisArg,bindметод, закрытие (let self = this) или функция стрелки.

Классы

В классах,thisотносится к новому созданному объекту. Это имеет место в методе конструктора и любых других методах, объявленных в классе.

class Person {
constructor(name, age) {
this.name = name
this.age = age
}
sayHello() {
console.log(`Hello from ${this.name}`)
}
}let amy = new Person("Amy", 25)amy.sayHello()
// => Hello from Amy (logged in console)

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

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

function sayThis() {
console.log(this)
}let sayThisArrow = () => console.log(this)const amy = {
name: "Amy",
age: 25,
sayThis: sayThis,
sayThisArrow: sayThisArrow
}sayThis()
// => Window object (logged to console)amy.sayThis()
// => amy object (logged to console)sayThisArrow()
// => Window object (logged to console)amy.sayThisArrow()
// => Window object (logged to console)

Опять таки,thisвsayThis()этоWindowобъект, так как он такой же, какwindow.sayThis(), Следуя этой схеме,thisвamy.sayThis()этоamyобъект.

Теперь о наших новых функциях стрелок. Мы это видимthisв обоихsayThisArrow()а такжеamy.sayThisArrow()этоWindowобъект.Зачем?Из приведенного выше определения функции-стрелки связаны с тем местом, где они были объявлены, а не с объектом, к которому они обращаются. ФункцияsayThisArrowбыл объявлен в рамкахWindowобъект.

Важно отметить, что контекст выполнения функции стрелкине будетвсегда бытьWindowобъект.

источники

Выражения функций стрелок

Выражение функции стрелки является синтаксически компактной альтернативой регулярному выражению функции, хотя без…

developer.mozilla.org

Функциональные выражения и стрелки

В JavaScript функция - это не «магическая языковая структура», а особый вид значения. Синтаксис, который мы использовали ...

javascript.info

ES6 In Depth: функции стрелок - Mozilla Hacks - блог веб-разработчика

ES6 In Depth - это серия новых функций, добавленных в язык программирования JavaScript в 6-м издании…

hacks.mozilla.org

Функции стрелки: толстый и краткий синтаксис в JavaScript

Кайл представляет функции стрелок ES6, синтаксис для написания функций JavaScript, охватывающий использование, общие синтаксисы, общие…

www.sitepoint.com

Оригинальная статья

Footer decor

© machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map