Ключовата дума „this“ на JavaScript може да бъде един от най-объркващите аспекти на езика за много разработчици. Той се държи различно в зависимост от това как и къде се използва. Нека демистифицираме ключовата дума „това“, като разберем нейното поведение в различни контексти:
1. **Глобален контекст:**
В глобалния обхват (извън всяка функция или обект) „това“ се отнася до глобалния обект, който е „прозорец“ в браузърите и „глобален“ в Node. js. Например:
```javascript
console.log(this); // ‘прозорец’ в браузъри, ‘глобален’ в Node.js
```
2. **Контекст на функцията:**
В рамките на обикновена функция стойността на „this“ зависи от това как се извиква функцията. Ако функцията се извика директно, „this“ ще сочи към глобалния обект (в нестрог режим) или ще бъде недефиниран (в строг режим). Например:
```javascript
function myFunction() {
console.log(this);
}
myFunction(); // ‘прозорец’ в нестрог режим, ‘недефиниран’ в строг режим
```
3. **Контекст на метода на обекта:**
Когато дадена функция се извиква като метод на обект, „това“ се отнася до обекта, който притежава метода. Например:
```javascript
const myObject = {
име: 'Джон',
sayHello: function() {
console.log( `Здравей, ${this.name}!`);
}
};
myObject.sayHello(); // ‘Здравей, Джон!’
```
4. **Функции със стрелки:**
Функциите със стрелки нямат собствен контекст „това“. Вместо това, те наследяват „това“ от заобикалящия лексикален обхват (обграждаща функция или глобален обхват). Например:
```javascript
const myObject = {
name: 'John',
sayHello: function() {
setTimeout(() =› {
console.log(`Здравей, ${this.name}!`);
}, 1000);
}
};
myObject.sayHello(); // ‘Здравей, Джон!’ след 1 секунда
```
5. **Манипулатори на събития:**
В манипулатори на събития „това“ обикновено се отнася до DOM елемента, който е задействал събитието. Това поведение обаче може да се промени в зависимост от това как е прикачен манипулаторът на събитието.
6. **Функции на конструктора:**
Когато използвате функции на конструктор за създаване на обекти, „това“ във функцията на конструктора се отнася до новия обект, който се създава. Например:
```javascript
function Person(name) {
this.name = name;
}
const john = new Person(‘John’);
console.log(john.name); // ‘Джон’
```
За да обобщим, стойността на „this“ в JavaScript зависи от контекста, в който се извиква дадена функция. Разбирането на различните контексти и как се държи „това“ е от съществено значение за писането на правилен и поддържаем JavaScript код. От решаващо значение е да имате предвид контекста и да използвате техники като bind(), call() или apply(), за да контролирате изрично стойността на „this“, когато е необходимо.
