Понимание ключевого слова `Это` в Javascript

Что такое ключевое слово this?

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

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

Источник: stackoverflow

Примечание: Ключевое слово this не является переменной, вы не можете изменить значение ключевого слова this. Это ключевое слово, которое ссылается на объект.

Вопрос в том, каково значение this почти каждый, кто когда-либо писал на javascript, в какой-то момент сталкивался с ошибкой.

• Ключевое слово this ссылается на объект, который выполняет текущую функцию.

Вот пример :

const person = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: function () {
  console.log(`My name is ${this.name} am a ${this.type}`)
  }
}

person.career()

// Output:
// My name is David Igheose am a frontend developer

Почему ключевое слово this?

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

Итак, у нас есть два объекта с именами person one и person two:

// person one 
const person1 = {
  name: 'John don',
  type: 'Blockchain developer',
}

// person two 
const person2 = {
  name: 'David Igheose',
  type: 'frontend developer',
}

В вышеуказанных объектах мы добавляем к ним функцию, которая выглядит следующим образом:

// persona one
const person1 = {
  name: 'John don',
  type: 'Blockchain developer',

  career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
  }
}
person1.career()
// Output:
// My name is John don am a Blockchain developer


// person two
const person2 = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: function () {
  console.log(`My name is ${person2.name} am a ${person2.type}`)
  }
}

person2.career()

// Output:
// My name is David Igheose am a frontend developer

Из примера кода видно, что ключевое слово this не используется, мы просто используем имя объекта для ссылки на элемент внутри него, например :

// person one
career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
 }

// person two
career: function () {
  console.log(`My name is ${person2.name} am a ${person2.type}`)
  }

Проблема этого метода заключается в том, что использование имени объекта для ссылки на элемент может привести к ошибке в коде, например, если вы решите обратиться к объекту person1 внутри объекта person2, например :

// persona one
const person1 = {
  name: 'John don',
  type: 'Blockchain developer',

  career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
  }
}

person1.career()

// Output:
// My name is John don am a Blockchain developer

// person two
const person2 = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
  }
}

person2.career()

// Output:
// My name is John don am a Blockchain developer

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

Ключевое слово «This» в строгом режиме

Вне любого объекта this в строгом режиме всегда является неопределенным. Заметьте, я упомянул строгий режим. Если строгий режим отключен (состояние по умолчанию, если вы явно не добавили ‘use strict’ поверх вашего файла), вы находитесь в так называемом небрежном режиме, и this — за исключением некоторых конкретных случаев, упомянутых ниже — имеет значение глобального объекта. Что означает окно в контексте браузера. Источник: flaviocopes

Ключевое слово «This» внутри функции Arrow

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

// person object
const person = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: ()  => {
  console.log(`My name is ${this.name} am a ${this.type}`)
  }
}

person.career()

// Output:
// My name is undefined am a undefined

Для функций у нас есть три типа, а именно:

• Объявление функции — автоматически привязывается к объекту.
• Выражение функции — автоматически привязывается к объекту.
• Стрелочная функция — привязывается лексически.

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

Вызов() или применение()

call и apply очень похожи — они вызывают функцию с заданным контекстом this и необязательными аргументами. Единственное различие между call и apply заключается в том, что call требует передачи аргументов по одному, а apply принимает аргументы в виде массива.
Источник: Таня Рашиа

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

// person object
const person = {
  name: 'David Igheose',
  type: 'frontend developer',
}


const career = function(props) {
  console.log(`My name is ${this.name} am a ${this.type} and a ${props}`)
}

career.call(person, "technical writer")

// Output:
// My name is David Igheose am a frontend developer and a technical writer

career.apply(person, ["technical writer"])
// Output:
// My name is David Igheose am a frontend developer and a technical writer

мы видим разницу между методом call() и apply(), метод call() принимает аргументы отдельно, в то время как метод apply() принимает аргументы отдельно.
аргументы отдельно, в то время как метод apply() принимает аргументы в виде массива.

Что дальше?

Теперь вы знаете основы работы ключевого слова this. Вы знаете, что это такое и почему оно может быть полезным. Но ничто не убедит вас больше, чем практический опыт.

Спасибо, что прочитали

Не стесняйтесь подписываться на мою рассылку по электронной почте и общаться со мной