это в JavaScript

это – ключевое слово, которое имеет разные значения в зависимости от того, где оно используется.

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

это в строгом режиме

Вне любого объекта/|это в строгом режиме всегда не определено .

Обратите внимание, я упомянул строгий режим. Если строгий режим отключен (состояние по умолчанию, если вы явно не добавляете "использовать строгий" поверх своего файла), вы находитесь в так называемом небрежном режиме , и это – если только некоторые конкретные случаи, упомянутые здесь ниже, – имеет значение глобального объекта.

Что означает окно в контексте браузера.

это в методах

Метод – это функция, прикрепленная к объекту.

Вы можете видеть это в различных формах.

Вот один из них:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive() {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

car.drive()
//Driving a Ford Fiesta car!

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

Примечание: приведенное выше объявление метода совпадает с drive: function(){ …, но короче:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive: function() {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

То же самое работает и в этом примере:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

car.drive = function() {
  console.log(`Driving a ${this.maker} ${this.model} car!`)
}

car.drive()
//Driving a Ford Fiesta car!

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

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive: () => {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

car.drive()
//Driving a undefined undefined car!

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

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

Это невозможно из-за того, как они работают. это является лексически связанным , что означает, что его значение выводится из контекста, в котором они определены.

Явно передайте объект, который будет использоваться в качестве этого

JavaScript предлагает несколько способов сопоставления этого с любым объектом, который вы хотите.

Используя bind() , на шаге объявление функции :

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function() {
  console.log(`Driving a ${this.maker} ${this.model} car!`)
}.bind(car)

drive()
//Driving a Ford Fiesta car!

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

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive() {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

const anotherCar = {
  maker: 'Audi',
  model: 'A4'
}

car.drive.bind(anotherCar)()
//Driving a Audi A4 car!

Используя вызов() или применить() , на шаге вызова функции :

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function(kmh) {
  console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`)
}

drive.call(car, 100)
//Driving a Ford Fiesta car at 100 km/h!

drive.apply(car, [100])
//Driving a Ford Fiesta car at 100 km/h!

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

Особый случай обработчиков событий браузера

В обратных вызовах обработчиков событий это относится к элементу HTML, который получил событие:

document.querySelector('#button').addEventListener('click', function(e) {
  console.log(this) //HTMLElement
}

Вы можете найти его с помощью

document.querySelector('#button').addEventListener(
  'click',
  function(e) {
    console.log(this) //Window if global, or your context
  }.bind(this)
)

Оригинал: “https://flaviocopes.com/javascript-this/”