"이"키워드는 무엇입니까? 자바스크립트에서

자바스크립트 초보자라면 "THIS"키워드를 접할 수 있습니다. 처음에는 자바, C# 등과 같은 다른 언어와 관련하여 자바스크립트 언어에 대해 다르게 동작하기 때문에 이해하기가 혼란스럽습니다.
이 블로그에서는 이 키워드의 기본 사항과 자바스크립트의 다양한 시나리오에서 키워드가 어떻게 작동하는지 다룰 것입니다.

"THIS"에 들어가기 전에 숙지해야 할 몇 가지 전제 조건이 있습니다.

아시다시피 브라우저는 자바스크립트 코드의 깊은 수준을 이해하지 못하므로 브라우저가 실행할 코드로 변환되어야 합니다. 따라서 브라우저의 JS 엔진은 실행 컨텍스트라는 고급 Javascript 코드를 실행하기 위한 특수 환경을 만듭니다.

실행 컨텍스트:- 코드 줄이 실행되는 범위입니다. javascript에는 이러한 실행 컨텍스트의 스택이 있으며 스택 맨 위에 있는 컨텍스트가 현재 실행 중입니다.

실행 컨텍스트에는 두 가지 유형이 있습니다.

전역 실행 컨텍스트:- 이 컨텍스트에서 실행되는 함수 외부에 있는 모든 Javascript 코드를 의미하는 기본 실행 컨텍스트이므로 각 javascript 파일에 대해 하나의 전역 실행 컨텍스트만 있을 수 있습니다

.

기능적 실행 컨텍스트:-Javascript 코드에서 함수 호출이 발생할 때 생성되는 다른 유형의 실행 컨텍스트입니다. 하나 이상의 기능 호출이 있을 수 있으므로 각 호출에 대해 서로 다른 기능 실행 컨텍스트가 생성됩니다.

이제 우리는 코드가 어떻게 실행되는지 알았습니다. "THIS"부터 시작하겠습니다.
이것은 단순히 함수가 호출된 방식을 의미합니다.

기본 실행 컨텍스트는 전역입니다. 이는 아래 코드에서 볼 수 있듯이 창 개체를 포함하는 전역 컨텍스트를 참조하는 창 개체를 가리킴을 의미합니다.

function abc(){
       console.log(this)
}
abc() /* which will gives you 
      window object:-Window {window: Window, self: 
       Window, document: document,...} */

그러나 어떤 함수에 대해 엄격 모드가 활성화되면 이 값은 코드에서 볼 수 있듯이 엄격 모드에서와 같이 정의되지 않은 것으로 표시됩니다.

function abc(){
    'use strict';
       console.log(this)
}
abc()// which gives of "undefined" as a value of this  

생성자 함수가 있는 "this"
함수가 new 키워드로 호출되면 호출될 때마다 새 인스턴스를 생성하므로 이 값은 코드에서 볼 수 있듯이 가장 최근에 생성된 인스턴스를 참조합니다.

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"적용 및 바인딩
이것의 사용자 지정 값을 설정하기 위해 우리는 모든 자바스크립트 함수와 함께 제공되는 메서드를 호출, 적용 및 바인딩하는 데 사용합니다.
Call과 Apply의 유일한 차이점은 apply의 두 번째 인수가 인수를 포함하는 배열이고 in 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( second country )에 지정된 개체로 새 함수 bind를 생성하므로 이것이 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"는 전역 컨텍스트에 있는 창 개체를 나타냅니다

.

생성자 함수를 사용하면 항상 새로 생성된 객체를 참조합니다

.

apply 및 Bind this를 호출하면 항상 해당 함수에 전달된 값을 참조합니다.