M3 | WebDev

🔥 Как работает this в JavaScript? – примеры с call, apply, bind

В JavaScript this – это ключевое слово, которое зависит от контекста вызова функции. Давай разберёмся, как оно работает, и как его можно контролировать с помощью call, apply и bind.

🔍 this в разных контекстах
📌 В методе объекта – this указывает на сам объект:

const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi(); // "Alice"

📌 В обычной функции (function) значение this зависит от режима:

Без строгого режима ("use strict"):
В браузере this указывает на window.
В Node.js this будет {} в модуле, а в функции – undefined.

function showThis() {
  console.log(this);
}

showThis(); 
// В браузере без "use strict" → window
// В Node.js → undefined

• В строгом режиме ("use strict") this всегда undefined в обычных функциях:

"use strict";

function showThis() {
  console.log(this);
}

showThis(); 
// undefined

📌 В arrow function this не создаётся, а берётся из внешнего контекста:

const obj = {
  name: "Alice",
  arrowFunc: () => console.log(this)
};

obj.arrowFunc(); 
// this возьмётся из глобального контекста (в браузере – window, в Node.js – {})

🚀 Важно: this в arrow function определяется в момент создания и не меняется!

2️⃣ Как изменить this? Используем call, apply, bind
🔥 call – вызов функции с заданным this
Синтаксис: func.call(context, arg1, arg2, ...)

function sayHello() {
  console.log(`Привет, ${this.name}`);
}

const user = { name: "Alice" };

sayHello.call(user); // "Привет, Alice"

✅ call сразу вызывает функцию.
✅ Можно передавать аргументы через запятую.

🔥 apply – как call, но аргументы передаются массивом
Синтаксис: func.apply(context, [arg1, arg2, ...])

function sum(a, b) {
  console.log(this.value + a + b);
}

const obj = { value: 10 };

sum.apply(obj, [2, 3]); // 10 + 2 + 3 = 15

✅ Удобно, если аргументы уже находятся в массиве.
❌ apply редко используется, так как сейчас есть оператор spread (...):

sum.call(obj, ...[2, 3]); // Тоже самое, что apply

🔥 bind – создаёт новую функцию с привязанным this
Синтаксис: const newFunc = func.bind(context, arg1, arg2, ...)
📌 Пример использования bind в обработчике событий:

const button = {
  text: "Нажми меня",
  handleClick() {
    console.log(this.text);
  }
};

document.querySelector("button").addEventListener("click", button.handleClick.bind(button));

Если вызвать handleClick без bind, this станет undefined, так как обработчик событий меняет контекст вызова.

🚀 Итог
✅ Используй call, если нужно вызвать функцию сразу и передать this.
✅ Используй apply, если аргументы уже находятся в массиве.
✅ Используй bind, если нужно привязать this и вызвать функцию позже.

74 views11:07