Что вообще такое "это"!!!

Ключевое слово «это», как правило, является сложной концепцией для новых программистов, которые знакомятся с концами и выходами javascript. «это» существует и в других языках, но есть особые случаи при работе с javascript. Строго говоря, this представляет собой текущий контекст выполнения. Что именно это означает, становится немного сложнее различить, чем сложнее ваш код? «this» всегда будет ссылкой на объект. Вопрос какой объект?

Есть простые случаи, например, когда this используется отдельно вне какого-либо объекта или области действия функции или когда this находится внутри отдельной функции. В обоих случаях, глобальном вызове и вызове функции соответственно, «это» относится к глобальному объекту или окну. Теперь для любых новых программистов, которые только что столкнулись с концепцией «это», вы, вероятно, также изо всех сил пытаетесь понять глобальный объект, но, проще говоря, все в вашем файле или окне существует в одном объекте, называемом глобальным объектом или объектом. окно, если вы работаете в браузере. Это сложная концепция, но все в javascript в конечном счете находится внутри одного родительского объекта. Если вы хотите увидеть глобальный объект, запустите код ниже.

function exFunc(parameter) {
   this.parameter = parameter;
   console.log(this);
}
console.log(exFunc(parameter));

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

Еще один простой случай для расшифровки значения «это» — это когда оно существует в функции внутри объекта. Если функция находится внутри объекта, this ссылается на сам объект. Эти функции внутри объектов считаются методами. Методы обычно ссылаются на объект, внутри которого они находятся (мы увидим исключения позже в режиме конструктора). Рассмотрим пример ниже. «Это» внутри функции exFunc ссылалось на объект «exObj».

const exObj = {
   key1: “Name”,
   exMethod() {
      console.log(this);
   }
};
exObj.exMethod

Метод exMethod ссылается на родительский объект exObj при вызове. Это позволяет вам использовать самореферентную функциональность внутри объектов.

Тогда есть случаи, которые не так чисты. Эти случаи включают «это» внутри обработчиков событий, «это», используемое вместе с явным связыванием функций, таких как call() и apply(), и наиболее сложные при использовании внутри новой функции-конструктора. В экземпляре обработчиков событий «это» относится к элементу, получившему событие. Например, в этом примере кода «это» относится к элементу HTML, который получает событие.

<button onclick=”this.style.display=’none’”>
   Now ya see me, Now ya don’t!
</button>

Еще один сложный случай для расшифровки значения «это» — это когда оно используется вместе с методами .call() и .apply(). .call() и .apply() — это предопределенные методы JavaScript, которые вызывают метод объекта с другим объектом в качестве аргумента. Это сложная концепция, которая заслуживает отдельной статьи, но для наших сегодняшних целей это простое правило заключается в том, что this ссылается на объект, вызываемый методом. Таким образом, в этом случае exObj2 будет вызываться с использованием метода из edObj 1.

const exObj1 = {
   title: function() {
      return this.make + “ “ + this.model;
   }
}
const exObj2 = {
   Make:”Ford”,
   Model: “Fiesta”,
}
exObj1.fullName.call(exObj2); // => “Ford “Fiesta”

Хотя вызов функции объекта обычно вызывает глобальный объект, мы можем подорвать этот результат, используя ключевое слово «новый». Это, вероятно, наш самый сложный пример ключевого слова this. Согласно веб-документам MND, «новый оператор позволяет разработчикам создавать экземпляр определяемого пользователем типа объекта или одного из встроенных типов объектов, который имеет функцию конструктора». Хотя режим конструктора заслуживает отдельной статьи, в целях определения того, на что ссылается «это», просто знайте, что при использовании нового ключевого слова любое «это» в исходной функции теперь ссылается на вновь созданный объект.

const newExObj = new exFunc(parameter);
console.log(newExObj)

В этом примере кода newExObj стал пустым объектом, а «это», записываемое в консоль, теперь ссылается на этот вновь созданный объект, а не на глобальное окно.

В конечном счете, «это» — чрезвычайно мощный инструмент в javascript, но требуется практика и терпение, чтобы привыкнуть к множеству различных видов вызовов. От более простых случаев вызова global, function, free до более сложных случаев вызова метода, обработчиков событий, функций привязки, таких как вызов и применение, и использования ключевого слова new в режиме конструктора. Выяснение многих вариантов использования «этого» на раннем этапе может быть чем-то вроде ситуации «кто на первом месте, что на втором», но, в конце концов, все экземпляры «этого» станут важным средством построения вашего кода по мере его получения. глубже в кроличью нору JavaScript!

Рекомендации

• БДН

• Школы W3

• Программирование с помощью Mosh (youtube)

Фотография Эббота и Костелло от CNBC