Ключевое слово this JavaScript

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

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

В зависимости от места использования, он имеет различные значения:

• В методе, this указываетвладельческий объект

• отдельно, this указывает наглобальным объектом

• В функции, this указываетглобальным объектом

• В функции, в строгом режиме, this являетсяНеопределенным

• В событии, this указывает на объект,элемент

• Методы, такие как call() и apply(), могут быть привязаны клюбой объект

Методический контекст

В методе объекта this указывает на контекст методаuser.

В следующем примере, когда вызываетсяuser.getName()внутри функции this привязывается кuserОбъект:

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age : 22,
getName : function() {
　return this.firstName + " " + this.lastName;
}
;
document.write(user.getName()); // "Vishal Choudhary"

ЗдесьuserОбъект является владельцемgetNameметода.

Глобальный контекст

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

// В Web-браузере объект окна также является глобальным объектом:
console.log(this === window); // true
a = 50;
console.log(window.a); // 50
this.b = "w3codebox";
console.log(window.b) // "w3codebox"
console.log(b) // "w3codebox"

В браузере глобальным объектом является[object Window].

Функциональный контекст

Внутри функции значение this зависит от способа вызова функции.

Поскольку следующий код не выполняется в строгом режиме, therefore this по умолчанию установлено в глобальный объект, то есть в браузере это[object Window]:

function myFunc() {
return this;
}

В строгом режиме, однако значение thisundefined:

function myFunc() {
"use strict";
return this;
}

Таким образом, в строгом режиме, если контекст выполненияНеопределеннымЕсли оно не определено, то оно останетсяНеопределенное состояние.

thisВ обработчиках событий DOM

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

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
;

При вызове кода из обработчика событий inline, this устанавливается в элемент, на котором размещен слушатель:

<button onclick="this.style.display='none'">Нажмите, чтобы удалить меня</button>

Это другой пример:

<button onclick="alert(this)">Нажмите</button>

Экстремальная функция绑定

Методы call() и apply() являются предопределенными методами JavaScript.

Они могут быть использованы для вызова методов объекта с другим объектом в качестве параметра.

function add(c, d) {
return this.a + this.b + c + d;
}
var obj = {a: 5, b: 10};
add.call(obj, 5, 7);　　//　27
add.apply(obj, [10, 20]);　//　45

Функция-стрелка (=>)

В функции-стрелке (=>), this всегда указывает на этот момент词法 области, в которой она была создана.

В глобальном коде, он будет установлен в глобальный объект:

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj);　　　//　true