Frontend | Вопросы собесов

🤔 От чего зависит this ?



Значение this зависит от контекста, в котором функция вызывается. Понимание того, как this определяется в различных ситуациях, является ключом к правильному использованию функций и методов в JavaScript. Рассмотрим основные правила и примеры.



🚩Основные правила



Глобальный контекст или контекст функции:

В глобальном контексте (вне любой функции) или внутри обычной функции (не метода объекта) this ссылается на глобальный объект, который является window в браузере или global в Node.js.

      console.log(this); // window в браузере или global в Node.js



   function globalFunction() {

     console.log(this); // window в браузере или global в Node.js

   }

   

   globalFunction();

Методы объекта:

Когда функция вызывается как метод объекта, this ссылается на объект, который использовался для вызова метода.

      const obj = {

     name: 'Alice',

     greet: function() {

       console.log(this.name);

     }

   };

   

   obj.greet(); // 'Alice'

Конструкторы и классы:

this ссылается на вновь созданный объект.

      function Person(name) {

     this.name = name;

   }

   

   const person = new Person('Bob');

   console.log(person.name); // 'Bob'

   

   class Animal {

     constructor(name) {

       this.name = name;

     }

   }

   

   const animal = new Animal('Charlie');

   console.log(animal.name); // 'Charlie'

Явное задание this с помощью call, apply и bind:

Методы call и apply позволяют вызывать функцию с явно заданным значением this. Метод bind создает новую функцию, которая при вызове имеет определенное значение this.

function sayHello() {

     console.log(this.name);

   }

   

   const person = { name: 'David' };

   

   sayHello.call(person); // 'David'

   sayHello.apply(person); // 'David'

   

   const boundSayHello = sayHello.bind(person);

   boundSayHello(); // 'David'

🚩Значение this зависит от контекста вызова:



🟠В глобальном контексте и обычных функциях this ссылается на глобальный объект (window или global).

🟠В методах объекта this ссылается на сам объект.

🟠В конструкторах и классах this ссылается на вновь созданный объект.

🟠С помощью call, apply и bind можно явно задать значение this.

🟠Стрелочные функции захватывают this из окружающего лексического контекста.

🟠Вложенные функции могут иметь различное значение this, что можно решить с помощью стрелочных функций или сохранения контекста внешней функции.



Ставь 👍 и забирай 📚 Базу знаний