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

Пример

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Попробуйте сами

Что такое this?

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

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

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

Как call() и apply() Такие методы могут ссылаться на this на любой объект.

this в методе

В методах объекта:this Это означает "владельца" этого метода.

В примере вверху этой страницы:this Это означает объект person.

Объект person является "владельцем" метода fullName.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Попробуйте сами

Отдельный this

В отдельном использовании владелец это глобальный объект, поэтому: this Это означает глобальный объект.

В браузере глобальный объект это: [object Window]:

Пример

var x = this;

Попробуйте сами

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

Пример

"use strict";
var x = this;

Попробуйте сами

this в функции (по умолчанию)

Привязка this по умолчанию в функции JavaScript: this.

поэтому в функции:this означает глобальный объект [object Window].

Пример

function myFunction() {
  return this;
}

Попробуйте сами

this в функции (строгий режим)

Строгий режим JavaScript не позволяет по умолчанию привязку this.

поэтому в функции, в строгом режиме использования:this является неопределенным (undefined})

Пример

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

Попробуйте сами

this в обработчике событий

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

Пример

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

Попробуйте сами

Связь методов объекта

В данном примере:this является объектом person (объект person является "владельцем" этой функции):

Пример

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

Попробуйте сами

Пример

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Попробуйте сами

Другими словамиthis.firstName означает thisобъекта firstName Свойства.

Экспlicit binding of functions

call() и apply() Методы - это предварительно определенные методы JavaScript.

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

Вы можете прочитать о них более подробно в конце этого руководства. call() и apply() подробнее.

В следующем примере, когда person2 используется в качестве аргумента при вызове person1.fullName,this Будет ссылаться на person2, даже если это метод person1:

Пример

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // вернет "Bill Gates"

Попробуйте сами