JavaScript добавляет стрелочные функции в синтаксис ES6.По сравнению с традиционными функциями, стрелочные функции не только более лаконичны, но и улучшены в этом отношении. Это странное явление в JavaScript, и во многих статьях этому есть разные объяснения.В этой статье делается попытка прояснить отношения между функциями и this в JS.
1. Как писать функции на JS
1. Написание обычных функций
До синтаксиса ES6 функции в JS состояли из ключевого слова function, параметров params и тела функции, заключенного в фигурные скобки. Чтобы отличить ее от стрелочных функций, упомянутых ниже, мы сначала называем такие функции регулярными функциями.Обычные функции могут быть написаны либо в декларативном стиле, либо в стиле присваивания. пример:
function test(name) { //声明式写法
console.log(name)
}
test('Jerry')
let test2 = function(name) { //赋值式写法
console.log(name)
}
test2('Tom')
2. Как писать стрелочные функции
Введение стрелочных функций ES6 делает написание функций более кратким, но при написании необходимо соблюдать определенные правила.
Правило 1: Стрелочные функции могут быть написаны только в стиле присваивания, а не в декларативном стиле.
пример:
const test = (name) => {
console.log(name)
}
test('Jerry')
Правило 2: Если параметр один, круглые скобки можно опустить, если параметр отсутствует или их больше одного, необходимо добавить круглые скобки.
пример:
const test = name => {
console.log(name)
}
test('Jerry')
const test2 = (name1, name2) => {
console.log(name1 + ' and ' + name2)
}
test2('Tom', 'Jerry')
Правило 3: Если в теле функции всего одно предложение, фигурные скобки не нужны.
пример:
const test = name => console.log(name)
Правило 4: Если в теле функции нет круглых скобок, можно не писать return, стрелочная функция поможет вернуться
пример:
const add = (p1, p2) => p1 + p2
add(10, 25)
Помните: Крытые скобки функционального тела такие же, как ключевое слово возврата.
Как видно из приведенных выше примеров, стрелочные функции упрощают как круглые, так и фигурные скобки обычных функций. Помимо этих упрощений, самая большая оптимизация стрелочных функций по сравнению с обычными функциями заключается в следующем.
Во-вторых, поймите это в обычных функциях
Прежде чем обсуждать оптимизацию this для стрелочных функций, мы должны сначала понять, что это такое и как оно используется.Это первый параметр, который передается при вызове функции с помощью метода call. Он может быть изменен при вызове функции. Когда функция не вызывается, значение this не может быть определено.
Если вы не использовали метод call для вызова функции, приведенное выше определение this может быть неясным. Затем нам нужно сначала понять два метода вызова функции.
1. Чистый вызов функции
Первый метод является наиболее распространенным, примеры следующие:
function test(name) {
console.log(name)
console.log(this)
}
test('Jerry') //调用函数
Мы используем этот метод чаще всего, но этот метод вызова функции является лишь сокращением, полный метод его написания выглядит следующим образом:
function test(name) {
console.log(name)
console.log(this)
}
test.call(undefined, 'Tom')
Обратите внимание на приведенный выше метод вызова, который вызывает функцию?Первый параметр, полученный методом call, здесь мы передаем неопределенный. Итак, по определению, будет ли это напечатано после выполнения функции неопределенным? Ни один.
Если передаваемый вами контекст имеет значение null или не определен, то объект окна является контекстом по умолчанию (контекст по умолчанию в строгом режиме не определен).
Итак, здесь мы вводим это объект Window.
2. Вызов функции объекта
Просто посмотрите на пример:
const obj = {
name: 'Jerry',
greet: function() {
console.log(this.name)
}
}
obj.greet() //第一种调用方法
obj.greet.call(obj) //第二种调用方法
Первый вызывающий метод в примере — это просто синтаксический сахар для второго вызывающего метода, а второй — полный вызывающий метод.И самое замечательное во втором методе то, что он может указать это вручную..
Пример ручного указания этого:
const obj = {
name: 'Jerry',
greet: function() {
console.log(this.name)
}
}
obj.greet.call({name: 'Spike'}) //打出来的是 Spike
Из приведенного выше примера мы можем видеть, что это было изменено нами при выполнении функции приветствия.
3. это в конструкторе
Это в конструкторе немного особенное.Каждый конструктор возвращает объект после нового.Этот объект это это, который является контекстом.
пример:
function Test() {
this.name = 'Tom'
}
let p = new Test()
console.log(typeof p) //object
console.log(p.name) // Tom
4. Вызовы функций в window.setTimeout() и window.setInterval()
this в функциях window.setTimeout() и window.setInterval() несколько особенный, и this в нем по умолчанию является объектом окна.
Краткое резюме: полный метод вызова функции заключается в использовании метода вызова, включаяtest.call(context, name)а такжеobj.greet.call(context,name), Контекст вот время контекстами вызова функций, то есть это, но это может быть изменено по этому вызову метода; специальный конструктор немного, объект возвращен после него непосредственно к этому новому новому;window.setTimeout()а такжеwindow.setInterval()По умолчанию это объект окна.
3. Поймите это в стрелочных функциях
Об этом много говорилось выше, это первый параметр, который передается при вызове функции с помощью метода call, а также его можно изменить вручную, поэтому слишком хлопотно определять его значение. Однако наличие стрелочных функций помогло нам определить, что это немного помогло.
1. Особенность 1 стрелочных функций: привязать внешний this по умолчанию
Упомянутый выше:Значение this можно изменить с помощью метода call, и мы можем определить значение this только при его вызове.. И когда мы используем стрелочные функции,Стрелочная функция поможет нам связать значение внешнего this по умолчанию, поэтому значение this в стрелочной функции такое же, как и внешнее this.
Пример без функции стрелки:
const obj = {
a: function() { console.log(this) }
}
obj.a() //打出的是obj对象
Пример использования стрелочных функций:
const obj = {
a: () => {
console.log(this)
}
}
obj.a() //打出来的是window
В примере с использованием стрелочных функцийПоскольку стрелочная функция не будет использовать собственное this по умолчанию, а будет согласована с внешним this, самым внешним this является объект окна.
2. Вторая особенность стрелочных функций: вы не можете использовать метод вызова, чтобы изменить это внутри
Это также легко понять. Ранее мы говорили, что это функции можно указать вручную с помощью метода вызова. Чтобы уменьшить сложность этого, стрелочные функции не могут указывать это с помощью метода вызова.
пример:
const obj = {
a: () => {
console.log(this)
}
}
obj.a.call('123') //打出来的结果依然是window对象
Поскольку мы упомянули выше, что this в функции в window.setTimeout() является окном по умолчанию, мы также можем использовать функцию стрелки, чтобы сделать this совместимым с внешним this:
Пример window.setTimeout():
const obj = {
a: function() {
console.log(this)
window.setTimeout(() => {
console.log(this)
}, 1000)
}
}
obj.a.call(obj) //第一个this是obj对象，第二个this还是obj对象
Вы должны понимать, что функция obj.a не использует стрелочную функцию, потому что это по-прежнему obj, а функция в setTimeout использует стрелочную функцию, поэтому она будет согласовываться с внешним this, который также является obj; если функция в setTimeout Если функция стрелки не используется, то она должна ввести объект окна.
В-четвертых, это функция многоуровневой вложенности объектов.
Вот небольшое сомнение, с которым столкнулся автор во время обучения. Функция this в стрелке согласуется с внешним слоем, но если этот внешний слой имеет много слоев, что он собирает?
Непосредственно на примере:
const obj = {
a: function() { console.log(this) },
b: {
c: function() {console.log(this)}
}
}
obj.a() // 打出的是obj对象, 相当于obj.a.call(obj)
obj.b.c() //打出的是obj.b对象, 相当于obj.b.c.call(obj.b)
Приведенный выше код является интуицией. Затем замените функцию, соответствующую obj.b.c, функцией стрелки. Результаты следующие:
const obj = {
a: function() { console.log(this) },
b: {
c: () => {console.log(this)}
}
}
obj.a() //没有使用箭头函数打出的是obj
obj.b.c() //打出的是window对象！！
После вызова obj.a объект obj печатается,После вызова obj.b.c объект окна печатается вместо obj, что означает, что this в стрелочной функции вложенности многослойных объектов соответствует самому внешнему слою.
Вышеупомянутое содержание - это разобранные автором очки знаний при изучении стрелочных функций, если есть какие-то ошибки, прошу покритиковать и исправить! Это моя третья статья о Наггетс, спасибо за прочтение!
Ссылка на эту статью:Какова именно ценность этого? скажи это один раз