TypeError: 정의되지 않은 속성을 읽을 수 없습니다('forEach' 읽기).

이전에 javascript에서 이 오류가 발생한 적이 있습니까TypeError: Cannot read properties of undefined (reading 'forEach') 이 오류에 대한 많은 원인이 있지만 오늘은 그 중 하나를 살펴보겠습니다. 아래 코드를 살펴보십시오.

// index.js
const printNumbers = {
    phrase: "The current value is",
    numbers: [1, 2, 3, 4],
    loop: () => {
        this.numbers.forEach((number) => {
            console.log(this.phrase, number)
        })
    }
}

printNumbers.loop();

이 코드를 실행하려면 터미널을 열고 node index.js를 실행하십시오. 오류가 발생합니다.

TypeError: Cannot read properties of undefined (reading 'forEach')

원인

오류의 원인을 이해하려면 javascript의 범위 및 화살표 기능을 이해해야 합니다.

자바스크립트에서 범위는 자바스크립트에 대한 변수의 접근성을 결정하는 코드의 현재 컨텍스트를 나타냅니다. 범위에는 글로벌 범위와 로컬 범위의 두 가지 유형이 있습니다.

에 대한 자세한 내용은 제 다른 자습서를 참조하십시오.

화살표 함수에는 자체 값이 없습니다this. 둘러싸는 어휘 범위의 this 값을 사용합니다. 위의 코드에서 화살표 함수의 this 키워드는 printNumbers 개체의 속성 및 메서드(함수)를 참조해야 합니다. 그러나 javascript의 개체에는 어휘 범위가 없으므로 화살표 함수는 this 값에 대한 개체 외부(이상)를 찾습니다. 외부는 무엇입니까? global 속성이 없는 numbers 범위(창 개체). 따라서 Javascript 엔진은 numbers 객체에 window 속성을 추가하고 해당 값을 undefined 로 설정합니다.

이 문제를 해결하려면 기존 함수를 개체의 메서드(함수)로 사용해야 합니다.

다음은 수정된 동일한 코드입니다.

// index.js
const printNumbers = {
    phrase: "The current value is",
    numbers: [1, 2, 3, 4],
    loop(){ // ==> changes made
        this.numbers.forEach((number) => {
            console.log(this.phrase, number)
        })
    }
}

printNumbers.loop();

대답

기존 함수는 키워드를 다시 바인딩합니다this.

감사합니다, 팔로우해주세요