JavaScript의 `this` 키워드 이해하기: 전체 가이드

JavaScript의 this 키워드는 언어의 가장 강력하지만 종종 오해되는 측면 중 하나입니다. 함수의 값은 정의된 위치보다는 함수가 호출되는 방법에 따라 결정되므로 코드 내에서 컨텍스트를 관리하는 데 중요합니다.

이 가이드에서는 실제 예제를 통해 이것의 미묘한 차이를 살펴보고 호출, 적용 및 바인딩을 사용하여 이를 명시적으로 제어하는 ​​방법을 자세히 살펴보겠습니다.

---

이것의 기본

자바스크립트에서는 현재 코드를 실행하고 있는 객체를 의미합니다. 값을 결정하는 규칙은 함수의 호출 유형에 따라 다릅니다.

1. 암시적 바인딩: 메서드 호출 이전의 개체입니다.
2. 명시적 바인딩: 호출, 적용 또는 바인딩을 사용하여 명시적으로 설정할 수 있습니다.
3. 새 바인딩: 생성자 함수에서 새로 생성된 객체를 나타냅니다.
4. 전역/창 바인딩: 위의 규칙 중 어느 것도 적용되지 않으면 기본값은 전역 개체(브라우저의 창 또는 Node.js의 전역)입니다.

---

1. 암시적 바인딩: 호출자의 컨텍스트

객체의 메소드로 함수를 호출할 경우 점 앞의 객체를 의미합니다.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

이 예에서 자동차가 호출자이기 때문에 this.model은 자동차 개체의 모델 속성을 가리킵니다.

---

2. 명시적 바인딩: 호출, 적용, 바인딩 사용

이 값을 정확하게 제어해야 하는 경우 호출, 적용 또는 바인딩을 사용할 수 있습니다.

에이. 부르다

호출 메소드는 지정된 이 값과 개별 인수를 사용하여 함수를 즉시 호출합니다.

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Jack" };

greet.call(person, "Hello", "!"); // Output: "Hello, Jack!"

여기서 call은 this.name이 person 객체의 name 속성을 참조하는지 확인합니다.

비. 적용하다

적용 메소드는 호출과 유사하지만 인수를 개별적으로 사용하지 않고 배열로 사용합니다.

greet.apply(person, ["Hi", "."]); // Output: "Hi, Jack."

이는 전달할 인수 배열이 있는 경우 적용이 특히 유용합니다.

기음. 묶다

바인드 메소드는 지정된 객체에 영구적으로 설정된 새 함수를 반환하므로 지연된 호출이 가능합니다.

const boundGreet = greet.bind(person, "Welcome");
boundGreet("?"); // Output: "Welcome, Jack?"

바인드를 사용하면 특정 컨텍스트에 연결된 재사용 가능한 함수를 생성할 수 있습니다.

---

3. 새로운 바인딩: 생성자 함수를 사용하여 객체 생성

new 키워드로 함수를 호출하면 이는 생성되는 새 개체를 나타냅니다.

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

const jack = new Person("Jack");
console.log(jack.name); // Output: "Jack"

new 연산자는 이를 새로 생성된 객체로 설정하여 재사용 가능한 객체 청사진을 정의할 수 있도록 합니다.

---

4. 글로벌/윈도우 바인딩: 폴백

위 규칙 중 어느 것도 적용되지 않는 경우 기본값은 전역 개체입니다. 그러나 엄격 모드('use strict')에서는 이러한 경우가 정의되지 않습니다.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

전역 바인딩을 사용하면 의도하지 않은 동작이 발생할 수 있으므로 주의하세요.

---

호출, 적용, 바인딩 요약

간단한 비교는 다음과 같습니다.

Method	Purpose	Execution	Argument Passing
call	Immediate invocation	Yes	Individually
apply	Immediate invocation	Yes	Array of arguments
bind	Delayed invocation (returns new function)	No	Individually or partially

---

결론

깨끗하고 상황을 인식하는 JavaScript 코드를 작성하려면 this 키워드를 마스터하는 것이 필수적입니다. 암시적, 명시적, 신규 및 전역 바인딩을 이해함으로써 다양한 시나리오에서 이를 자신 있게 관리할 수 있습니다. 호출, 적용, 바인딩과 같은 도구는 세부적인 제어를 제공하여 기능을 유연하고 재사용 가능하게 만듭니다.

Follow me: Github Linkedin

위 내용은 JavaScript의 `this` 키워드 이해하기: 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!