JavaScript의 \'this\' 키워드는 도대체 무엇인가요?

주요 통찰력:

• 전역 범위: 전역 컨텍스트에서 이는 전역 개체(예: 창)를 나타냅니다.

• 함수 컨텍스트: 일반 함수 내에서 이는 엄격 모드와 비엄격 모드에서 다르게 동작하여 정의되지 않음 또는 전역 객체를 반환합니다.

• 메서드: 객체 메소드에서 이는 객체 자체를 참조하며 해당 속성에 액세스할 수 있습니다.

• Call, Apply, Bind: 이 방법을 사용하면 this 컨텍스트를 변경하여 객체 간에 기능을 공유할 수 있습니다.

• 화살표 함수: 화살표 함수에는 자체 this가 없으며 주변 어휘 컨텍스트에서 상속됩니다.

• DOM 요소: DOM 이벤트 핸들러에서 이벤트를 트리거한 HTML 요소를 나타냅니다.

---

글로벌 범위

먼저 "this"가 전역 범위에서 어떻게 작동하는지 살펴보겠습니다. JavaScript에서는 코드의 최상위 수준에서 "this"를 참조하면 전역 개체를 참조합니다. 웹 브라우저에서 이 전역 개체는 창입니다.

예:

    console.log(this); // Outputs: Window

그러나 Node.js에서는 전역 객체가 다르며 전역이라고 합니다.

따라서 "this"의 값은 JavaScript 코드가 실행되는 환경에 따라 달라질 수 있습니다.

---

"this" 내부 함수 이해하기

다음으로 "this"가 함수 내에서 어떻게 작동하는지 살펴보겠습니다. 함수를 정의하고 호출할 때 함수가 어떻게 호출되는지에 따라 해당 함수 내부의 "this" 값이 달라집니다.

비엄격 모드에서 함수 내에서 "this"를 기록하면 전역 개체도 참조합니다.

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

그러나 "use strict"를 추가하여 엄격 모드를 활성화하면; 함수 상단의 "this"는 정의되지 않음:
입니다.

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

이 동작은 이 대체의 결과로, "this"가 비엄격 모드에서 null이거나 정의되지 않은 경우 기본값은 전역 객체로 설정됩니다.

---

엄격 모드와 비엄격 모드

엄격 모드와 비엄격 모드의 차이점을 이해하는 것이 중요합니다. 비엄격 모드에서는 "this"의 값이 전역 개체가 될 수 있지만, 엄격 모드에서는 개체에 명시적으로 바인딩되지 않으면 정의되지 않습니다.

---

요약:

• 글로벌 공간에서 "this"는 글로벌 객체를 의미합니다.
• 함수에서 "this"는 비엄격 모드에서는 전역 객체를 참조할 수 있지만 엄격 모드에서는 정의되지 않습니다.

---

객체 메소드에서 "this"가 작동하는 방식

이제 객체 메소드 내에서 "this"가 어떻게 작동하는지 논의해 보겠습니다. 함수가 개체 내부에 정의되면 메서드로 간주되며 "this"는 메서드가 호출될 때 해당 개체를 참조합니다.

    console.log(this); // Outputs: Window

여기서 "this"는 메소드가 정의된 객체인 "obj"를 의미합니다.

---

호출, 적용 및 바인딩을 통한 방법 공유

객체 간 메소드를 공유하기 위해 JavaScript는 call, apply, bind의 세 가지 기능을 제공합니다. 이들 각각을 사용하면 "this" 값을 명시적으로 설정할 수 있습니다.

• call: 지정된 이 값과 인수를 사용하여 함수를 호출합니다.
• 적용: 호출과 유사하지만 인수 배열을 허용합니다.
• bind: 지정된 이 값을 사용하여 새 함수를 반환합니다.

예:

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

이 경우 printName 내부의 "this"는 학생1이 아닌 학생2를 나타냅니다.

---

화살표 함수와 "this"

화살표 함수는 기존 함수와 다르게 동작합니다. 그들은 자신만의 "this" 컨텍스트를 갖고 있지 않습니다. 대신 포함하는 어휘 컨텍스트에서 "this"를 상속합니다. 이는 화살표 함수 내의 "this"가 함수 외부에서와 동일한 값을 참조한다는 것을 의미합니다.

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

여기서 화살표 함수의 "this"는 "obj" 객체를 참조하며, 화살표 함수가 둘러싸는 컨텍스트에서 "this" 값을 캡처하는 방법을 보여줍니다.

---

DOM의 "this"

마지막으로 DOM 작업 시 "this"는 이벤트를 트리거한 HTML 요소를 참조할 수 있습니다. 예:

    const obj = {
        name: 'My Object',
        getName: function() {
            console.log(this.name);
        }
    };
    obj.getName(); // Outputs: My Object

이 경우 버튼을 클릭하면 "this"는 버튼 요소 자체를 나타냅니다.

---

읽어주셔서 감사합니다. 이 가이드가 도움이 되었다면 동료 개발자들과 공유하고 JavaScript의 "this"에 대한 이해를 확고히 할 수 있도록 계속 연습하세요!

위 내용은 JavaScript의 \'this\' 키워드는 도대체 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!