JavaScript에서 &#this&# 키워드 마스터하기

JavaScript의 this 키워드는 이해하지 못하면 상당히 까다로울 수 있습니다. 숙련된 개발자라도 쉽게 이해하기 어려운 것 중 하나이지만 일단 이해하고 나면 많은 시간을 절약할 수 있습니다.

이 기사에서는 그것이 무엇인지, 다양한 상황에서 어떻게 작동하는지, 그리고 사용할 때 범해서는 안되는 일반적인 실수에 대해 알아볼 것입니다.

JavaScript로 이것을 이해하기

단순히 현재 자바스크립트 코드에서 사용되는 개체를 나타냅니다. 그러나 여기에 까다로운 부분이 있습니다. 이것이 가리키는 내용은 코드에서 이를 사용하는 위치와 방법에 따라 달라질 수도 있습니다. 누군가는 "왜 그렇죠?"라고 물을 수도 있습니다. 음, 이것은 본질적으로 동적입니다. 즉, 해당 값은 작성될 때가 아니라 함수가 호출될 때 결정됩니다.

전역 및 기능 컨텍스트에서 이

글로벌 맥락에서 이것을 사용할 때 종종 글로벌 객체를 지칭하는데, 꽤 이해가 되시죠? 따라서 브라우저 콘솔에 이것을 입력하면 창을 가리킬 것입니다.

함수 내부에서 사용될 때는 상당히 다르게 동작합니다. 예를 들어, "myFunction" 함수를 호출하면 여전히 전역 개체를 가리키지만 Javascript에서 엄격 모드를 사용하면 해당 함수 내에서 정의되지 않은 상태가 됩니다.

네, 꽤 혼란스럽다는 걸 알아요. 그냥 따라오세요. 더 잘 설명드리겠습니다.

이것은 개체에 있습니다.

메서드(객체의 속성인 함수) 내에서 this를 사용하면 해당 메소드가 속한 객체를 참조합니다.

예:

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

여기서 this.name은 'Alice'인 myObject.name을 의미합니다.

이것은 생성자와 클래스에서

생성자: 생성자 함수나 클래스를 사용하여 객체를 생성할 때 생성되는 새 객체를 나타냅니다.

예:

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

코드에서 this.name은 새 Person 개체의 name 속성을 나타냅니다.

일반적인 실수와 이를 피하는 방법

이와 관련된 일반적인 실수 중 하나는 콜백이나 이벤트 핸들러에서 올바른 값을 잃는 것입니다. 예를 들어 객체의 메소드를 콜백으로 전달하면 더 이상 객체를 참조하지 않을 수 있습니다.

해결책: 이를 방지하려면 화살표 기능을 사용하거나 바인딩하여 올바른 개체를 계속 가리키도록 할 수 있습니다.

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

결론

이 키워드는 귀찮을 수 있는데, 주의할 점은 어떻게 부르느냐, 어디에 부르느냐에 따라 달라진다는 점입니다. 더 잘하려면 많은 예제를 통해 연습해 보세요. 시간이 지나면 곧 전문가가 될 것입니다.

위 내용은 JavaScript에서 &#this&# 키워드 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!