Какво е „this'
?
this
е ключова дума в JavaScript, която препраща към обекта, който изпълнява текущата функция. Има 2 общи правила:
- Ако функцията е част от обект,
this
препраща към обекта. - Ако функцията е обикновена функция (не е част от обект),
this
се отнася до глобалния обект, който е обектът на прозореца в браузърите и глобален в node.js.
Нека да разгледаме някои примери:
const person = { name: "April", talk() { console.log(this); }, }; person.talk(); //{ name: 'April', talk: [Function: talk] }
Както се вижда в изхода на person.talk()
, this
отпечатва стойността на обекта person
.
function Person(name) { this.name = name; console.log(this); } Person("John"); // <ref *1> Object [global] { // global: [Circular *1], // clearInterval: [Function: clearInterval], // clearTimeout: [Function: clearTimeout], // setInterval: [Function: setInterval], // setTimeout: [Function: setTimeout] { // [Symbol(nodejs.util.promisify.custom)]: [Getter] // }, // queueMicrotask: [Function: queueMicrotask], // clearImmediate: [Function: clearImmediate], // setImmediate: [Function: setImmediate] { // [Symbol(nodejs.util.promisify.custom)]: [Getter] // }, // name: 'John' // }
В изхода по-горе Person(“John”) записва this
и резултатът е Object [global]
. Не забравяйте, че това е функция, която не принадлежи на обект. Нека да разгледаме пример за това по-долу.
function Person(name) { this.name = name; console.log(this); } const p = new Person("Taylor"); //Person { name: 'Taylor' }
В примера по-горе ние всъщност регистрираме обекта Person. Защо този пример е различен от предишния? Тъй като операторът new
създава нов празен обект и кара this
да сочи към обекта.
Нека да разгледаме друг пример:
const person = { name: "Jonathan", nicknames: ["Jon", "Jonnie", "Jay"], showNicknames() { this.nicknames.forEach(function (nickname) { console.log(this.name, nickname); }); }, }; person.showNicknames(); // undefined Jon // undefined Jonnie // undefined Jay
Можем да видим по-горе, в изхода на person.showNicknames();
, this.name
е undefined
. Защо така? Функцията вътре в forEach
е обикновена функция. Не принадлежи на обекта на лицето. Ето едно решение за разрешаване на това. Първият е да се използва вторият параметър в метода на масива forEach
, който приема обекта, към който this
трябва да препраща. В нашия случай ние просто използваме this.
const person = { name: "Jonathan", nicknames: ["Jon", "Jonnie", "Jay"], showNicknames() { this.nicknames.forEach(function (nickname) { console.log(this.name, nickname); }, this); }, }; // Jonathan Jon // Jonathan Jonnie // Jonathan Jay
Друго решение е да използвате функция със стрелка по следния начин:
const person = { name: "Jonathan", nicknames: ["Jon", "Jonnie", "Jay"], showNicknames() { this.nicknames.forEach((nickname) => { console.log(this.name, nickname); }); }, }; person.showNicknames(); // Jonathan Jon // Jonathan Jonnie // Jonathan Jay
Във функция със стрелка стойността this
винаги е равна на стойността this
от външната функция. Функцията стрелка разрешава this
лексикално. В предишния пример функцията всъщност използва нещо, наречено „просто извикване“. Когато направим това, this
ще е равен на глобалния обект или недефиниран, ако използваме строг режим. Ще разгледам това в бъдеща статия, така че следете!