это в JavaScript

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

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

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

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

Вне любого объекта,thisвстрогий режимвсегдаundefined.

Обратите внимание, я упомянул строгий режим. Если строгий режим отключен (состояние по умолчанию, если вы явно не добавляете'use strict'поверх вашего файла), вы находитесь в так называемомнебрежный режим, иthis- за исключением некоторых конкретных случаев, упомянутых здесь ниже - имеет значение глобального объекта.

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

thisв методах

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

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

Вот один:

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

drive() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

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

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

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

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

drive: function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

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

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

car.drive = function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) }

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

Стрелочная функция работает иначе, поскольку она лексически связана:

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

drive: () => { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

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

Связывание стрелочных функций

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

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

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

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

С помощьюbind(), наобъявление функциишаг:

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

const drive = function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) }.bind(car)

drive() //Driving a Ford Fiesta car!

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

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

drive() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

const anotherCar = { maker: ‘Audi’, model: ‘A4’ }

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

С помощьюcall()или жеapply(), навызов функциишаг:

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

const drive = function(kmh) { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car at </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">kmh</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> 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()всегда привязан кthis. Разница между call () и apply () заключается только в том, что второй хочет массив в качестве списка аргументов, а первый принимает переменное количество параметров, которые передаются как аргументы функции.

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

В обратных вызовах обработчиков событий,thisотносится к 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)
)

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: