Если вы начинающий пользователь javascript, вы можете столкнуться с ключевым словом «THIS». Поначалу оно вызывает недоумение, поскольку в языке javascript оно ведет себя по-разному по сравнению с другими языками, такими как java, c# и др.
В этом блоге я расскажу об основах этого ключевого слова и о том, как оно работает в различных сценариях в javascript.
Прежде чем перейти к «ЭТОМУ», необходимо ознакомиться с некоторыми предпосылками.
Как вы знаете, браузер не понимает глубокий уровень кода javascript, поэтому его необходимо преобразовать в код, который браузер будет выполнять. Поэтому JS-движок браузера создает специальную среду для выполнения расширенного кода Javascript, называемую контекстом выполнения (Execution Context).
- Контекст выполнения:- область, в которой выполняются строки кода. У javascript есть стек этих контекстов исполнения, и в данный момент выполняется тот, который находится на вершине стека.
Существует два типа контекста исполнения
- Глобальный контекст исполнения:- Это контекст исполнения по умолчанию, который означает, что весь код Javascript, который находится вне функции, выполняется в этом контексте, поэтому для каждого файла javascript может быть только один глобальный контекст исполнения.
- Functional Execution Context:- Это другой тип Execution Context, создаваемый при вызове функции в коде Javascript. Функциональных вызовов может быть один или несколько, поэтому для каждого вызова создается свой функциональный контекст исполнения.
Теперь мы знаем, как выполняется код, давайте начнем с «THIS».
Это просто означает, как была вызвана функция
По умолчанию контекст выполнения является глобальным — что привело к тому, что это ссылается на глобальный контекст, который содержит объект окна, значит, это указывает на объект окна, как вы можете видеть в приведенном ниже коде.
function abc(){
console.log(this)
}
abc() /* which will gives you
window object:-Window {window: Window, self:
Window, document: document,...} */
Но, если для какой-либо функции включен строгий режим, то значение this будет помечено как undefined, как в строгом режиме, как видно из кода
function abc(){
'use strict';
console.log(this)
}
abc()// which gives of "undefined" as a value of this
«this» с функцией конструктора
когда функция вызывается с ключевым словом new, она создает новый экземпляр при каждом вызове, поэтому значение this будет относиться к последнему созданному экземпляру, как показано в коде
function capitalOfCountry(country,capital){
this.country = country ;
this.capital = capital ;
console.log(`${this.capital} is a capital of ${this.country } `)
}
new capitalOfCountry("India","New Delhi")// New Delhi is a capital of India
new capitalOfCountry("Dhaka", "Bangladesh")//Bangladesh is a capital of Dhaka
«this» с вызовом, применением и привязкой
Для установки пользовательского значения this мы используем методы call, apply и bind, которые поставляются с каждой функцией javascript.
Давайте сначала рассмотрим методы Call и Apply, поскольку единственное различие между ними заключается в том, что второй аргумент метода apply представляет собой массив, содержащий аргументы, в то время как в методе Call аргументы передаются по отдельности.
function capitalOfCountry(country,capital){
this.country = country ;
this.capital = capital ;
this.dispalyCapitalOfCountry = function() {
console.log(`${this.capital} is a capital of ${this.country } `)
}
}
let firstCountry = new capitalOfCountry("India","New Delhi")
firstCountry.displayCapitalOfCountry()//New Delhi is a capital of India
let secondCountry = new capitalOfCountry("Bangladesh","Dhaka")
secondCountry.displayCapitalOfCountry()//Dhaka is a capital of Bangladesh
firstCountry.dispalyCapitalOfCountry.call(secondCountry)//Dhaka is a capital of Bangladesh
А с помощью метода bind создадим новую функцию bind с объектом, указанным в bind( second country ), так что это относится к secondCountry
function capitalOfCountry(country,capital){
this.country = country ;
this.capital = capital ;
this.dispalyCapitalOfCountry = function() {
console.log(`${this.capital} is a capital of ${this.country }`);
}
}
let firstCountry = new capitalOfCountry("India","New Delhi")
firstCountry.dispalyCapitalOfCountry()//New Delhi is a capital of India
let secondCountry = new capitalOfCountry("dhaka","bangladesh")
secondCountry.dispalyCapitalOfCountry()//bangladesh is a capital of dhaka
let displaySecond = firstCountry.dispalyCapitalOfCountry.bind(secondCountry)
displaySecond()//bangladesh is a capital of dhaka
Резюме
- «this» просто означает, как функция вызывается в коде javascript.
- По умолчанию «this» ссылается на объект окна, который присутствует в глобальном контексте
- с функцией конструктора, она всегда ссылается на только что созданный объект
- с функциями call, apply и Bind this всегда будет ссылаться на значения, переданные в этой функции.