Загадочное «это» в JavaScript

Загадочное «это» в JavaScript

На данный момент уже было написано множество серий руководств и статей для объяснения ключевого слова this в JavaScript. Бьюсь об заклад, на этот раз все будет очень просто и легко для понимания. Итак, приступим! 😎

Легенды гласят: «Ключевое слово this относится к текущему контексту (области действия) в JavaScript». Но что это значит? .. Давайте вместе разберемся в следующих примерах:

function movies (){
   console.log(this);
}
movies(); // ??

Что теперь вы ожидаете, что он войдет в журнал ?. Он запишет объект окна в консоль. Теперь давайте рассмотрим другой пример и посмотрим, как ключевое слово this ведет себя в этом сценарии.

function movies(){
  console.log(this);
}
let Disney = {movies};
console.log(Disney.movies());

Теперь здесь "this" будет отключать объект Disney. Почему так? На самом деле ключевое слово ’this’ просто относится к текущему контексту объекта, в котором оно находится. В первом примере this не находится ни в каком родительском контексте и, таким образом, указывает на глобальный объект (в данном случае окно), если строгий режим не применяется. А во втором сценарии фильма функция - это метод объекта Диснея, благодаря которому он обращается к объекту Диснея на консоли.

Есть еще один способ упростить вам эту загадку и, возможно, самый простой из всех объяснений. Вы можете просто рассмотреть текущий контекст для левостороннего объекта точечной записи при вызове любого метода объекта. А если до записи через точку нет объекта, то this будет относиться к глобальному объекту (кроме строгого режима). Давайте посмотрим на следующий пример, чтобы получить более четкую картину:

function movies(){
 console.log(this.moviesTitle); 
}
let disney = {
  moviesTitles: [‘Frozen’,’Mulan’,’Coco’],
  movies
}
movies; //undefined
disney.movies(); // [‘Frozen’,’Mulan’,’Coco’]

Также существует способ перезаписать контекст функции контекстом другого объекта с помощью метода привязки. Метод Bind оборачивает левый контекст функции контекстом объекта, переданного ему как параметр.

let disney = {
  moviesTitles: [‘Frozen’,’Mulan’,’Coco’],
  displayMovies: function(){
    console.log(this.moviesTitles); 
  }
}
let dreamworks = {
  moviesTitles: [‘Kung fu panda’,’Madagascar’,’The boss baby’]
}
const logMovies = disney.displayMovies.bind(dreamworks); 
// [‘Kung fu panda’,’Madagascar’,’The boss baby’]

На этом пока все 😉, хотелось бы услышать ваши мысли и предложения ниже 👇. Будьте на связи. 👋