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, где мы можем более подробно поговорить, и вы можете порекомендовать мне изменения или новые темы, которые вам нужно добавить. Давайте подключимся и продолжим общение!»