소개

JavaScript의 재미있는 세계로 들어가 "this" 키워드의 비밀스러운 힘에 대해 배울 준비가 되셨습니까? "this"의 흥미로운 영역을 통해 놀라운 항해를 준비하십시오. 여기에서 작업의 원인을 밝히고 코드의 모든 기능을 실현할 수 있습니다. 흥미로운 예와 명확한 설명을 통해 이 가이드는 "this"의 다양한 바인딩을 통해 스릴 넘치는 여행을 안내합니다. 이 여정이 끝날 때까지 오는 모든 코딩 어려움을 처리할 준비가 되어 있을 것이며 강력하고 확장 가능한 시스템을 구축할 수 있는 자신감을 갖게 될 것입니다. 따라서 더 이상 고민하지 않고 코드 부츠를 고정하고 "this" 키워드의 미지의 영역을 여행해 봅시다!

JavaScript에서 "this" 키워드는 현재 함수가 메서드인 개체를 나타냅니다. 동적으로 범위가 지정되는 변수입니다. 즉, 런타임 동안 함수 호출의 컨텍스트에 따라 범위가 변경됩니다. "this"는 사용되는 컨텍스트에 따라 의미가 크게 달라질 수 있기 때문에 JavaScript에서 핵심적이고 자주 오해되는 개념입니다.

"this"의 바인딩

"this" 키워드에는 JavaScript에서 기본 바인딩, 암시적 바인딩, 명시적 바인딩 및 새 바인딩의 네 가지 주요 바인딩이 있습니다. 이러한 바인딩을 이해하는 것은 JavaScript에서 "this" 키워드를 효과적으로 활용하는 데 필수적입니다. 각각 특정 컨텍스트에서 "this"를 사용하는 방법을 지정하기 때문입니다.

1. 기본 바인딩

"this"라는 용어가 함수 외부 또는 JavaScript의 전역 범위에서 사용되면 기본적으로 바인딩됩니다. 이 경우 "this"는 브라우저의 "window" 또는 Node.js의 "global"인 전역 개체를 나타냅니다.

다음은 작동 중인 기본 바인딩의 예입니다.

첫 번째 console.log 문에서 볼 수 있듯이 위의 예에서 "this" 키워드는 함수 외부에서 사용될 때 전역 개체를 참조합니다. 두 번째 console.log 문장은 logThis 함수 내에서 사용될 때 전역 객체도 참조함을 보여줍니다.

엄격 모드에서는 전역 개체가 정의되지 않고 전역 범위의 "this" 값이 아니라는 점을 기억하는 것이 중요합니다. 아래와 같이 코드 시작 부분이나 함수 내부에 "use strict"를 추가하여 엄격 모드를 활성화할 수 있습니다.

2. 암시적 바인딩

이 바인딩의 "this" 키워드는 함수가 속성인 개체를 나타냅니다. "this"는 함수가 객체의 메소드로 사용될 때 객체를 지정합니다. 함수가 속성인 개체가 "this"의 값을 결정합니다.

예를 들어,

위의 예에서 " 인사 " 함수는 " 사람 " 객체 의 속성입니다 . 우리는 person.greet()를 호출하여 " person " 객체의 이름 속성에 액세스할 수 있습니다. 이 메서드는 인사 메서드 내 this 값을 person 객체로 설정합니다. 이 상황에서 암시적 바인딩을 볼 수 있습니다. 암시적 바인딩은 이것으로 설명됩니다.

다른 예를 살펴보겠습니다.

이 예제에서 " 강사 " 객체는 속성으로 설정된 " sayName " 함수를 가지고 있으며, 강사.say()가 호출되면 " 강사 " 객체는 " sayName " 함수 에서 " 이것 " 의 값으로 설정됩니다. . 이것은 암시적 바인딩의 또 다른 예입니다.

3. 명시적 바인딩

코드에서 함수가 호출되는 방법이나 위치에 관계없이 명시적 바인딩 방법을 사용하여 호출에 대해 " this " 값을 명시적으로 설정할 수 있습니다 .

명시적 바인딩의 세 가지 방법이 JavaScript에 존재합니다: " call ", " apply " 및 " bind ".

" call " 메서드 를 사용하여 함수를 호출할 수 있으며 해당 함수 호출에 대해 " this " 값을 설정할 수도 있습니다 . " this " 에 대해 설정하려는 값은 call 메서드의 첫 번째 인수이고 다른 인수는 함수에 개별적으로 전송됩니다.

예를 들어:

" call " 메서드는 위의 예에서 " sayName " 함수를 호출하는 데 사용되며 " this " 값은 강사 개체로 설정됩니다.

개별 인수가 아닌 인수 배열을 허용한다는 점을 제외하면 " call "과 유사한 " apply" 메서드가 있습니다.

예를 살펴보겠습니다.

위의 예에서 " apply " 메서드는 함수를 호출하고 " instructor " 개체 에 " thissayName " 의 값을 설정하는 데 사용되었습니다 . 함수에 대한 인수는 배열로 전달됩니다.

" bind " 메소드는 "bind"에 전달된 첫 번째 인수를 "this"의 값으로 사용하여 새 함수를 생성합니다. "bind"에 주어진 인수는 나중에 새 함수가 호출될 때 원래 함수 내에서 "this"의 값으로 설정됩니다.

아래 예는 다음과 같습니다.

위의 예에서 " bind " 메서드는 " 강사 " 개체 로 설정된 " this "를 사용하여 새 함수 " instructorSayName " 을 만드는 데 사용되었습니다 . 나중에 " instructorSayName " 함수가 호출될 때 " call " 또는 " apply "를 사용한 것처럼 " sayName " 함수 내의 " this " 값이 " instructor " 개체 로 설정되었습니다 .

4. 새로운 바인딩

함수가 " new " 연산자로 호출될 때 " this " 키워드가 새로 생성된 객체에 바인딩되는 과정을 " new " 바인딩이라고 합니다.

" new " 연산자 로 함수를 호출하면 새 개체가 생성되고 함수 내의 " this " 키워드가 이 새로 생성된 개체로 설정됩니다. 또한 새로 생성된 객체의 프로토타입은 함수의 프로토타입 속성으로 설정됩니다.

예를 들어:

위의 예에서 " new " 연산자를 사용하여 " Person " 함수를 호출하여 새 개체를 만듭니다 . 개체에 " name " 및 " Greeting " 속성이 추가되고 " Person " 함수 내의 " this " 키워드가 새로 생성된 개체로 설정됩니다.

"new" 연산자를 사용하여 함수를 호출하면 "return" 문이 필요 없이 새로 생성된 객체가 반환된다는 점을 명심하는 것이 중요합니다. "return" 문을 사용하여 개체를 반환하면 새로 만든 개체 대신 해당 개체가 반환됩니다. "return" 문을 사용하고 개체가 아닌 값을 반환하는 경우 새로 생성된 개체가 반환됩니다.

화살표 함수와 "this"

JavaScript의 화살표 함수는 익명 함수(이름이 없는 함수)를 작성하기 위한 지름길을 제공합니다. "this" 키워드를 바인딩하는 방식은 기존의 함수 표현식과 차별화됩니다.

기존 함수 표현식에서 "this"의 값은 함수가 호출되는 방식에 따라 다릅니다. 앞에서 설명한 것처럼 "call", "apply" 또는 "bind" 명령을 사용하여 명시적으로 설정하거나 함수를 포함하는 개체에 따라 암시적으로 설정할 수 있습니다.

그러나 화살표 함수에서는 호출 방법이 아니라 화살표 함수가 생성된 컨텍스트가 "this"의 값을 결정합니다. 즉, 화살표 함수가 다른 함수 안에 없으면 화살표 함수 내의 "this" 키워드는 항상 외부 함수 또는 전역 개체의 "this" 값을 참조합니다.

간단히 말해서, 화살표 함수에는 자체 "this" 값이 없습니다. 대신 둘러싸는 범위에서 "this" 값을 상속합니다.

예를 들어:

다음은 외부 함수의 "this" 키워드를 참조하는 화살표 함수의 또 다른 예입니다.

위 예제에서 이 예제에서 " 인사 " 함수는 " Person " 함수 내부에 화살표 함수로 정의되었습니다 . 화살표 함수의 " this " 값은 " 인사 " 함수 호출 시 새로 생성된 객체 " elie " 에 할당된 " 사람 " 함수의 " this " 값 에 해당 합니다.

"call", "apply" 또는 "bind"의 사용은 화살표 함수에서 "this" 바인딩을 변경할 수 없다는 언급이 있습니다. 함수를 호출하는 데 사용되는 방법에 관계없이 화살표 함수 내의 "this" 값은 동일하게 유지됩니다. 이것은 "this"의 값이 예기치 않게 자주 변경되는 콜백 및 이벤트 핸들러에 화살표 함수를 특히 유용하게 만듭니다.

결론

결론적으로 JavaScript의 "this" 키워드를 배우는 것은 진정한 JavaScript 전문가가 되기 위한 중요한 단계입니다. 이 필수적이지만 종종 당혹스러운 개념은 코드를 만들거나 깨뜨릴 수 있으며 언어의 전체 기능을 활용하는 열쇠입니다. "this"의 4가지 기본 바인딩인 기본 바인딩, 암시적 바인딩, 명시적 바인딩, 새 바인딩에 대한 철저한 이해가 있다면 더 효율적일 뿐만 아니라 더 우아하고 역동적인 코드를 작성할 수 있을 것입니다. . 프로젝트 및 요구 사항이 변경됨에 따라 성장하고 진화할 수 있는 유연하고 적응력이 있으며 확장 가능한 코드를 개발하는 능력을 통해 앞으로 닥칠 모든 문제를 해결할 수 있습니다. 따라서 "this" 키워드를 수용하고 마스터하여 진정한 JavaScript 닌자가 되십시오!