JavaScript Ключове слово this
Приклад
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Спробуйте самі »
Що таке this?
В JavaScript ключове слово this відноситься до об’єкту, якому воно належить.
Which object depends on how this is being invoked (used or called).
Ключове слово this відноситься до різних об’єктів в залежності від того, де воно використовується:
В методі об’єкта this відноситься до об’єкта. |
Сам по собі this відноситься до глобального об’єкту. |
В функції this відноситься до глобального об’єкту. |
В функції в строгому режимі this є undefined. |
В події this відноситься до елемента, що отримав подію. |
Такі методи, як call(), apply() та bind() можуть посилатись на this в будь-якому об’єкті. |
Примітка
this не є змінною. Це ключове слово. Ви не можете змінити значення this.
this в методі
Коли використовується в методі об’єкта, this відноситься до об’єкта.
В прикладі вгорі на цій сторінці, this відноситься до об’єкту person.
Тому що метод fullName є методом об’єкту person.
fullName : function() {
return this.firstName + " " + this.lastName;
}
Спробуйте самі »
this сам по собі
Коли використовується сам по собі this відноситься до глобального об’єкту.
Тому що this запускається в глобальній області дії.
В браузері вікно глобального об’єкту є [object Window]:
В строгому режимі, коли використовується сам по собі, this також відноситься до глобального об’єкту:
this в функції (за замовчуванням)
В функції глобальний об’єкт за замовчуванням є прив’язкою для this.
У вікні браузера глобальний об’єкт є [object Window]:
this в функції (Strict)
В строгому режимі JavaScript не допускається прив’язка за замовчуванням.
Таким чином, при використанні в функції, в строгому режимі, this є undefined.
this в обробниках подій
В HTML обробниках подій this відноситься до HTML елемента, що отримав подію:
Приклад
<button onclick="this.style.display='none'">
Натисни, щоб видалити мене!
</button>
Спробуйте самі »
Прив’язка метода об’єкта
В цьому прикладі this є персональним об’єктом (тобто, об’єкт person є "власником" функції):
Приклад
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Спробуйте самі »
Приклад
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Спробуйте самі »
Іншими словами this.firstName є firstName властивістю this (об’єкта person).
Явна прив’язка функцій
Методи call() та apply() є передвизначеними JavaScript методами.
Вони обидва можуть використовуватись для виклику метода об’єкта з іншим об’єктом як аргумент.
В наведеному нижче прикладі при виклику person1.fullName з person2 як аргументом, this буде посилатись на person2, навіть якщо fullName є методом person1:
Приклад
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
// Поверне "John Doe":
person1.fullName.call(person2);
Спробуйте самі »
Function Borrowing
With the bind() method, an object can borrow a method from another object.
This example creates 2 objects (person and member).
The member object borrows the fullname method from the person object:
Приклад
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
Спробуйте самі »
This Precedence
To determine which object this refers to; Use the following precedence of order.
| Precedence | Object |
| 1 | bind() |
| 2 | apply() and call() |
| 3 | Object method |
| 4 | Global scope |
Is this in a function being called using bind()?
Is this in a function is being called using apply()?
Is this in a function is being called using call()?
Is this in an object function (method)?
Is this in a function in the global scope.
