JavaScript — это популярный язык программирования, который используется для создания динамических веб-приложений. Это универсальный язык, который можно использовать как для фронтенд-, так и для бэкенд-разработки. Одной из наиболее важных особенностей JavaScript является его способность обрабатывать функции уникальным способом. В этом блоге мы рассмотрим, что это такое в JavaScript, его область применения, использование и как с этим можно справиться с помощью обычных функций и функций со стрелками.

Что такое «это» в JavaScript?

В JavaScript это специальное ключевое слово, которое относится к текущему объекту, функции или контексту, в котором оно используется. Он используется для ссылки на объект, которому принадлежит текущий исполняемый код. Другими словами, this — это ссылка на объект, методом которого является функция. Значение this может меняться в зависимости от того, как вызывается функция.

Объем «этого»

Объем this определяется способом вызова функции. Есть четыре способа вызова this в JavaScript:

  • Глобальная область
    Когда this используется в глобальной области видимости, это относится к объекту окна, который является глобальным объектом в браузере.
console.log(this); // Window {window: Window, self: Window, ...}
  • Область действия
    Когда this используется в функции, это относится к объекту, методом которого является функция.
const person = {
  name: "John",
  age: 30,
  greet() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
};

person.greet(); // Hello, my name is John and I am 30 years old.
  • Область действия метода
    Когда this используется в методе, оно относится к объекту, которому принадлежит метод.
const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  },
  getAddress() {
    console.log(this.name + " lives at " + this.address.street + ", " + this.address.city + ", " + this.address.state);
  }
};

person.getAddress(); // John lives at 123 Main St, Anytown, CA
  • Область события
    Когда this используется в обработчике событий, оно относится к элементу, вызвавшему событие.
<button onclick="console.log(this)">Click me</button>

Использование слова «это»

Ключевое слово this обычно используется в объектно-ориентированном программировании для ссылки на объект, которому принадлежит метод. Он используется для доступа к свойствам и методам объекта из метода.

const person = {
  name: "John",
  age: 30,
  greet() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
};

person.greet(); // Hello, my name is John and I am 30 years old.

Обработка «этого» с помощью обычной функции или функции стрелки

В JavaScript есть два типа функций: обычные функции и стрелочные функции. То, как «это» обрабатывается в каждой из этих функций, отличается.

Обычная функция:

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

function greet() {
  console.log(this.name);
}

const person = {
  name: "John",
  age: 30,
  greet: greet
};

greet(); // undefined (this refers to the global object)
person.greet(); // John (this refers to the person object)

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

Функция стрелки:

В стрелочной функции «это» определяется контекстом, в котором определена стрелочная функция. У него нет собственного значения this, поэтому он использует значение this окружающего лексического контекста.

const person = {
  name: "John",
  age: 30,
  greet: function() {
    const greetFunc = () => {
      console.log(this.name);
    }
    greetFunc();
  }
};

person.greet(); // John (this refers to the person object)

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

Заключение:

В заключение, «это» — это специальное ключевое слово в JavaScript, которое относится к текущему объекту, функции или контексту, в котором оно используется. Его объем и использование зависят от способа вызова функции. Обычные функции и стрелочные функции обрабатывают это по-разному. Обычные функции определяют «это» на основе способа вызова функции, тогда как стрелочные функции наследуют «это» из окружающего лексического контекста.

"Спасибо за чтение! Если вам понравился этот пост, обязательно ознакомьтесь с некоторыми из моих других статей. Вы также можете найти меня в LinkedIn, где мы можем более подробно поговорить, и вы можете порекомендовать мне изменения или новые темы, которые вам нужно добавить. Давайте подключимся и продолжим общение!»