JavaScript에서 THIS 키워드는 무엇입니까? - 2 부

What is THIS keyword in JavaScript?

이전 기사에서 우리는 this 키워드는 일반적으로 다른 유형의 바인딩을 의미합니다. 이 기사에서 우리는 무엇을 볼 것입니다 this 키워드는 화살표 기능을 의미합니다.

화살표 함수에는 고유한 함수가 없다는 것을 배웠을 것입니다. this . 대신 this 사전적으로 결정됩니다. 왜 필요한지 먼저 이해합시다 this 어휘적으로 자신을 묶습니다.

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
        this.cars.forEach(function (car) {
            console.log(`${this.name} owns ${car}`);
        })
    }
}

person.showCars();
/*
Output:
undefined owns Aston Martin
undefined owns Maserati
undefined owns BMW
undefined owns Alfa Romeo
*/

이전 기사를 이해했다면 출력에 "undefined"가 표시되는 것에 놀라지 않을 것입니다. this 점 왼쪽에 아무것도 없으면 기본적으로 전역 개체에 바인딩됩니다(엄지 규칙 기억). forEach 루프에서 호출될 때 기본적으로 전역 개체에 바인딩되는 익명 함수를 전달합니다. 그래서 우리가 원하는 것은 this 부모를 참조하는 콜백 내부 this (person 개체를 가리킴).
다음은 화살표 기능을 사용하지 않고 이러한 유형의 동작을 방지하는 데 사용할 수 있는 솔루션입니다.

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
        this.cars.forEach(function (car) {
            console.log(`${this.name} owns ${car}`);
        }.bind(this))
    }
}
person.showCars();
/*
Output:
John Green owns Aston Martin
John Green owns Maserati
John Green owns BMW
John Green owns Alfa Romeo
*/

콜백을 현재 객체(사람)에 바인딩했으므로 호출 시 this 기억할 것입니다 person 내가 묶인 대상이다. 그래서 우리는 방법을 보았습니다 bind 문제를 해결하면 왜 화살표 기능이 필요합니까? 위의 코드를 직관적으로 읽으면 this forEach 루프가 person에 바인딩됩니다. 객체 즉. 부모 컨텍스트로. 이것은 변수 조회와 같은 어휘 바인딩으로 알려져 있으며, 자바스크립트 인터프리터는 부모를 찾습니다. this 화살표 함수 안에 있는 경우.

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
   // Here this will bind itself to person object
        this.cars.forEach((car) => {
   /*
   Here this will bind itself to 
   parent which itself is bind to person object 
   */
            console.log(`${this.name} owns ${car}`);
        })
    }
}
person.showCars();
/*
Output:
John Green owns Aston Martin
John Green owns Maserati
John Green owns BMW
John Green owns Alfa Romeo
*/

따라서 this 화살표 함수 내부의 키워드는 항상 부모를 찾습니다 this .
흥미로운 예를 하나 더 보자.

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: () => {
        this.cars.forEach((car) => {
            console.log(`${this.name} owns ${car}`);
        })
    }
}
person.showCars();

위의 코드를 실행하면 흥미로운 오류가 발생합니다 this.cars 정의되어 있지 않습니다. this 화살표 함수 내부의 키워드.
우리가 알고 있듯이 this 위의 코드에서 화살표 함수 내에서 사전적으로 결정됩니다 this 내부 showCars 전역 개체를 가리킵니다. 이후 this.cars 전역적으로 정의되지 않으므로 오류가 발생합니다.
그게 다야! 이것이 당신이 알아야 할 전부입니다 this 자바스크립트의 키워드. 또한 한 가지를 기억하고 항상 연습을 계속하고 장기적으로 도움이 될 기본 사항을 명확하게 유지하십시오.