Разбиране на „това“ в JavaScript

Разбиране на „това“ в JavaScript

След като съм работил в сайтове с над 50 милиарда посещения на уебсайтове годишно с Higglo Digital, пиша за технически теми и уча инженерите да имат солидни основи, които ще им помогнат да напреднат в кариерата си. Също така създавам страхотни продукти за цифрови номади — вижте го!

В JavaScript ключовата дума this се отнася до обекта, който в момента изпълнява кода. Може да се използва за препратка към самия обект или за достъп до неговите свойства и методи.

Една често срещана употреба на this е да се отнася до текущия обект в метод. Например:

const obj = {
  name: 'My Object',
  sayName: function() {
    console.log(`My name is ${this.name}`);
  }
}

obj.sayName(); // Output: "My name is My Object"

В този пример методът sayName използва this за достъп до свойството name на обекта obj.

Друга често срещана употреба на this е да се обвърже функция към конкретен обект. Това може да бъде полезно при предаване на метод като обратно извикване или при работа с манипулатори на събития.

Например:

const button = document.querySelector('button');

const obj = {
  name: 'My Object',
  sayName: function() {
    console.log(`My name is ${this.name}`);
  }
}
button.addEventListener('click', obj.sayName.bind(obj));

В този пример методът sayName е обвързан с обекта obj с помощта на метода bind. Когато се щракне върху бутона, методът sayName ще се изпълни с „this“, зададен на обекта „obj“, а не на елемента бутон.

Важно е да се отбележи, че стойността на this може да се променя в зависимост от това как се извиква дадена функция. В примерите по-горе this се отнася до обекта, на което функцията е свойство. Ако обаче функцията се извика като самостоятелна функция, this ще препраща към глобалния обект (обикновено „прозорец“ в браузъра).

Например:

function sayName() {
  console.log(`My name is ${this.name}`);
}

const obj = {
  name: 'My Object',
  sayName: sayName
}
obj.sayName(); // Output: "My name is My Object"
sayName(); // Output: "My name is undefined" (in the browser)

Във втория пример функцията sayName се извиква директно, така че this препраща към глобалния обект. За да избегнете това поведение, можете да използвате метода bind, както е показано в предишния пример, или можете да използвате методите call или apply, за да укажете стойността на this при извикване на функцията.

Например:

function sayName(greeting) {
  console.log(`${greeting} My name is ${this.name}`);
}

const obj = {
  name: 'My Object'
}
sayName.call(obj, 'Hello'); // Output: "Hello My name is My Object"
sayName.apply(obj, ['Hello']); // Output: "Hello My name is My Object"

В тези примери методите call и apply се използват за указване на стойността на this” при извикване на функцията sayName. Първият аргумент на call или apply е стойността на this, която искате да използвате, и всички допълнителни аргументи се предават на функцията както обикновено.

Основах Higglo Digital и ние можем да помогнем на вашия бизнес да смаже уеб играта с награден уебсайт и авангардна дигитална стратегия. Ако искате да видите красиво проектиран уебсайт, проверете ни.

Също така създадох Wanderlust Extension, за да открия най-красивите места по света с изключително подбрано съдържание. Виж това!