Какво е „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 ще е равен на глобалния обект или недефиниран, ако използваме строг режим. Ще разгледам това в бъдеща статия, така че следете!