Эта статья была изначально опубликована в: https://www.blog.duomly.com/what-is-this-keyword-in-javascript/
Это ключевое слово в JavaScript является важной концепцией, которая делает много путаницы для начинающих и более продвинутых разработчиков. Это очень мощно, но это не так просто использовать, если вы не знаете, как это работает. В статье я собираюсь объяснить, что это ключевое слово и какова его ценность в разных случаях с примерами кода, чтобы сделать его еще более очевидным.
Что это?
Предполагаем, как работает код JavaScript, чтобы лучше понять, что это ключевое слово. Каждый раз, когда мы запускаем JavaScript в браузере, двигатель выполняет серию шагов, и одним из них является создание контекста выполнения. Контекст выполнения может быть понятен как среда, в которой работает код JavaScript. Каждое выполнение контекста ссылается на объект, и этот объект обычно относится к этому значению ключевого слова. Другими словами, мы можем сказать, что это ключевое слово является ссылкой на объект, который называется функцией. Значение этого ключевого слова зависит от того, где он используется.
Это использовали в самом
Если это будет использоваться отдельно, а не в контексте любого объекта или функции, он будет ссылаться на глобальный объем. В случае браузера название глобального объекта является окно. Давайте посмотрим на простой пример кода:
Давайте пройдемся через пример выше, чтобы получить больше понимания этого ключевого слова в одиночку. Функция GetFruit () была вызвана в глобальном объеме, и первая переменная фруктов также помещается в глобальную масштаб. Если вы будете Console.log (this), окно-объект будет иметь метод getfruit () и свойство фрукта. На данный момент, когда мы называем это .fruit, он вернется «Apple», но локальная переменная фрукт вернет «банана». Наши это здесь является окно объектом, так что это. Фрейт относится к глобальной фрукту. Приятно упомянуть, что в случае строгого режима включен, это в глобальном объеме не определено.
это используется с методом
В случае создания нового объекта из конструктора, то наше это ключевое слово относится к новому экземпляру объекта. Давайте посмотрим на пример:
var firstName = "Peter";
var lastName = "Strong";
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.returnName = function() {
return this.firstName + ' ' + this.lastName;
};
}
let newPerson = new Person("Kate", "Smith");
console.log(newPerson.returnName()); // "Kate Smith"
В случае позволинга метода Repenname () он будет ссылаться на объект newPerson, который был создан с использованием Person Constructor, и наша стоимость будет «Кейт Смит», а не «Питер Сильный», потому что мы используем свойства объекта NewPerson.
Это используется в функции
Это ключевое слово, используемое внутри функции, может быть немного сложно. Хорошо помнить, что функция в JavaScript является объектом. Он имеет свои собственные свойства, один из них является это и ценность его стоимости зависит от того, как он вызывает. Если функция вызывается любым объектом, то это значение является объектом. В противном случае наша функция этого свойства является глобальным объектом – окно. Давайте посмотрим на пример кода.
var catName = "Garfield";
var catColor = "orange";
function getCat() {
return this.catName + ' is ' + this.catColor;
}
var cat = {
catName = "Jerry",
catColor = "gray",
getCat: function() {
return this.catName + ' is ' + this.catColor;
}
}
console.log (‘Cat в Gloabl Pope’, getcat ());//«GARField – COUNCOLE.LAGE».//«Джерри – серый», если мы проанализируем код, мы можем увидеть две функции, одна из них является глобальной функцией объема, и один из них является методом объекта Cat. Хотя мы называем глобальную функцию GetCat () (), она использует глобальные переменные области, потому что это ключевое слово в функции относится к глобальному объекту. В случае метода GetCAT () объекта Cat, это относится к свойствам объекта Cat, и именно так мы получаем 2 разных результата от таких аналогичных функций.
Это используется в мероприятии
В случае событий после запуска любого события мы называем обработчик событий. Эти обработчики – это функция, которая вызывает некоторый код. Хотя мы используем это ключевое слово в обработчике событий, это относится к элементу HTML, который начал функцию. Приятно помнить, что модель DOM – это дерево объектов, поэтому каждый HTML-элемент на странице хранится как объект внутри него. Давайте посмотрим на один пример код:
Теперь мы можем видеть, что используя это, мы можем ссылаться на кнопку HTML-объект и манипулировать его стилями, например.
Вызов (), применить () и свяжите ()
В JavaScript есть три метода, которые помогают нам установить это значение, это вызов (), Apply () и Bind ().
Иногда случается, что мы хотим одолжить метод от объекта и использовать его с другим контекстом, чем появится ошибка. Давайте посмотрим на код:
var boy = {
greeting = 'Hello',
sayHi: function() {
return this.greeting;
}
}
var spanishBoy = {
greeting: 'Hola'
}
boy.sayHi(); // "Hello";
Что мы можем сделать, если бы мы хотели использовать функцию SAYHI (), но с вариабельным приветствием испанского языка? Вот где вызов (), применить () и Bind () удобно. Давайте пройдем всеми из них и проверьте, какие отличия.
вызов()
Способ вызова () позволяет нам назначить это ключевое слово новое значение. Мы можем передавать несколько аргументов для звонка () метода. Первый аргумент – это значение нового этого, и затем мы можем пройти параметры функции. В результате вызывается функция с новыми этими и прошедшими аргументами. Давайте посмотрим код:
var boy = {
greeting = 'Hello',
sayHi: function() {
return this.greeting;
}
}
var spanishBoy = {
greeting: 'Hola'
}
boy.sayHi(); // "Hello";
boy.sayHi.call(spanishBoy); // "Hola";
Здесь вы можете увидеть результат использования метода вызова (). Метод SAYHI () сразу обращался с контекстом испанского сожаления, и у нас была возможность использовать метод Moys Object без создания нового метода для испанского объекта.
применять()
Давайте посмотрим на следующий метод, применяйте (). Этот метод очень похож на Call (), он также позволяет нам изменять это значение и призывать функцию сразу после его использования, но между ними используется небольшая разница. При прохождении аргументов звонить () метода, он выглядел так: call (newthis, arg1, arg2, arg3). В случае функции Apply () вместо того, чтобы пройти каждый аргумент отдельно, мы можем пропустить их как массив, как это: Применить (newthis, [arg1, arg2, arg3]) Отказ
связывать()
Способ BING () отличается от вызова () и нанесен () немного. Вместо немедленно вызывая функцию, свяжитесь () создает и возвращает новую функцию с новым присвоенным этим значением. Давайте посмотрим на пример кода.
var boy = {
greeting = 'Hello',
sayHi: function() {
return this.greeting;
}
}
var spanishBoy = {
greeting: 'Hola'
}
boy.sayHi(); // "Hello";
const sayHola = boy.sayHi.bind(spanishBoy);
sayHola(); // "Hola";
В этом примере мы можем видеть, что мы смогли создать новую функцию, называемую Sayhola (), и вы можете вызвать ее в любое время. Использование метода BIND () может быть очень полезным при работе с асинхронным кодом или если вы хотите пройти только некоторые из параметров вашей функции.
Заключение
В этой статье я прошел определение и использование этого ключевого слова в JavaScript. Я объяснил, какое по этому значению вы можете ожидать в разных сценариях, и описано 3 важных метода: call (), применить () и bind ().
Принимайте во внимание, насколько важно понять это ключевое слово, чтобы использовать его правильно и избегать большого количества ошибок в вашем коде, я надеюсь, что вы найдете эту статью полезную. Кроме того, приятно помнить, что понимание основы JavaScript будет очень полезно для освоения более продвинутых концепций.
Спасибо за чтение, Анна из Дуоомили
Оригинал: “https://dev.to/duomly/what-is-this-in-javascript-46pk”