Как мы все знаем, JavaScript является одним из самых популярных языков, используемых в настоящее время. Современный JavaScript может не только запускать приложения во внешнем интерфейсе, даже с помощью Node, но и на стороне сервера.
Здесь, в этой статье, мы собираемся обсудить одну из самых запутанных тем, с которой сталкивается большинство разработчиков, когда они начинают работать над JavaScript, то есть ключевое слово «это».
Ключевое слово this — это специальная переменная, которая создается для каждого контекста выполнения, то есть для каждой функции или объекта. Он принимает значение владельца функции, в которой он используется.
Вот некоторые важные моменты, которые необходимо помнить о ключевом слове this:
- Ключевое слово «это» не статично.
- Это зависит от того, как вызывается функция, и ее значение присваивается только при фактическом вызове функции.
- Ключевое слово this всегда относится к родителю/объекту, который его получает. Это совершенно не зависит от того, где он был объявлен.
- Он не указывает ни на саму функцию, ни на ее переменную среду.
Теперь давайте обсудим некоторые места, где вызывается ключевое слово this, и посмотрим, как его значение изменилось в зависимости от места его вызова. Это поможет нам лучше понять вышеупомянутые ключевые моменты.
В методе:-
Метод — это функция, которую мы объявили (как регулярное функциональное выражение) в любом объекте как свойство. Если мы используем ключевое слово this в любом методе, оно будет относиться к объекту, который вызывает этот метод. Давайте разберемся на примере:
const человек = {
год: 1999,
calculateAge: функция() {
вернуть 2050 — этот.год;
}
}
мы создали объект человека, который имеет два свойства: год и метод с именем calculateAge. В методе мы использовали ключевое слово this для вычисления возраста человека. Теперь вызвал это, чтобы получить вывод.
let age = person.calculateAge();
console.log(возраст);
// Вывод будет: 51
Теперь наследуйте этот метод другому новому объекту, у которого есть собственное свойство year. Затем снова вызвал этот метод и внимательно проверил вывод.
const чужой = {
Год: 1945
}
чужой.calculateAge = человек.calculateAge;
let AlienAge = Alien.calculateAge();
console.log(alienAge);
// Вывод будет: 105
Оба выхода разные. Даже мы унаследовали метод calculateAge от человека для нашего нового объекта, то есть пришельца. Но когда мы вызвали метод calculate, ключевое слово this берет значение из объекта, который в данный момент его вызывает. Таким образом, он присвоил значение года от инопланетного объекта, а не от человека, которому он был объявлен. Здесь проясняется наш ключевой момент, что ключевое слово this не статично и всегда относится к объекту, который его вызывает.
В регулярной функции или функциональном выражении:
Если мы используем ключевое слово «this» внутри любой обычной функции или с функцией, объявленной с помощью выражения, означает ключевое слово «функция» (в основном не функция стрелки), ключевое слово «это» будет ссылаться на «неопределенное». '. (Но код JavaScript должен быть написан в «строгом режиме», иначе он будет ссылаться на контекст окна). Запустите приведенный ниже код, чтобы понять больше со «Строгим режимом» и без него.
«использовать строгий»
функция приветствия () {
console.log(этот);
}
// вывод будет «не определен»
«использовать строгий»
константное приветствие = функция () {
console.log(это)
}
// вывод будет «не определен»
В функции стрелки:
Если мы используем ключевое слово «this» внутри стрелочной функции, представленной в ES6, то оно относится к лексическому «this», которое будет из окружающей функции. Это все потому, что стрелочная функция не получает ключевое слово this в своем контексте выполнения. Таким образом, он заимствует из родительской области. Давайте внимательно разберемся с различными примерами использования.
- Обычная функция, объявленная как функция стрелки:
const привет = () =› {
console.log(этот);
}
// вывод будет «Оконный объект»
Поскольку мы обсуждали, что функция стрелки использует лексическое значение this, здесь глобальный объект окна упоминается как ключевое слово this.
- Функция стрелки объявляется внутри любого литерала объекта:
постоянная карта = {
цвет: «зеленый»,
сообщение: ( ) =› {
console.log(этот);
}
}
карта.сообщение();
// Вывод будет «Оконный объект»
Здесь мы объявили метод как стрелочную функцию. И ключевое слово «this» функции стрелки относится к родительской области (лексической this). В нашем коде фигурные скобки объекта не создают никакой области блока, потому что это литерал объекта. Таким образом, родительская область будет иметь объект окна, который мы получаем в качестве вывода.
(Как мы уже упоминали выше, если мы объявили это как функциональное выражение, то «это» будет относиться к самому объекту, который когда-либо его вызывал. ).
- Функция стрелки, объявленная внутри любого класса:
класс приветствую {
конструктор (имя) {
это.имя = имя;
}
приветствие = ( ) =› {
console.log(этот);
}
}
пусть привет = новый привет («сойка»);
привет.приветствие();
// вывод будет «Приветствовать {имя: «джей», приветствие: ƒ}»
Здесь, в приведенном выше фрагменте кода, мы создаем класс с именем Greet, у которого есть метод приветствия, в котором мы печатаем ключевое слово «это». Так как здесь класс Greet создает сам себя, поэтому наша функция стрелки будет использовать лексическое значение this, которое будет ссылаться на класс Greet в соответствии с нашим выводом.
В прослушивателе событий:
В случае прослушивателя событий ключевое слово this относится к элементу DOM, к которому привязан обработчик. В основном «это» устанавливается на элемент, на котором находится слушатель (функция обратного вызова должна быть функциональным выражением). Давайте посмотрим пример:
‹div id="тест"›
‹h1›Это ключевое слово ‹/h1›
‹/дел›
let element = document.querySelector("#test");
element.addEventListener("щелчок", функция() {
console.log(этот);
});
// Вывод будет: ‹div id="test"›
‹h1›Это ключевое слово ‹/h1›
‹/div›
Здесь, в приведенном выше фрагменте кода, мы создали элемент div, который имеет атрибут id со значением строки «test». Мы выбираем этот div с помощью querySelector, а позже прикрепляем прослушиватель событий click, в котором печатается ключевое слово this. Поэтому, когда мы запускаем этот код и нажимаем на div, на выходе будет сам элемент div. Потому что ключевое слово this в переданной функции относится к элементу, к которому подключен слушатель.
Теперь запустите тот же код, просто снова замените переданную функцию в прослушивателе событий функцией стрелки, а затем снова проверьте вывод.
‹div id="тест"›
‹h1›Это ключевое слово ‹/h1›
‹/дел›
пусть элемент = документ.querySelector («# тест»);
element.addEventListener("щелчок", ( ) => {
console.log(этот);
});
// Вывод будет: объект окна
Вывод снова отличается из-за лексической области действия стрелочной функции, из-за которой она ссылается на свое ключевое слово this на родительскую область, которая является глобальным окном.
Итак, наконец, у нас есть другое место, где мы использовали ключевое слово «это» по-другому.
Поэтому всякий раз, когда вы используете ключевое слово «это», используйте его осторожно. В начале это кажется запутанным, но с практикой и знанием основных концепций JavaScript им будет легко пользоваться.
Спасибо && Удачного кодирования !!!! 😀
