JavaScript의 `bind()` 메소드는 `this` 키워드를 어떻게 제어합니까?

bind()의 목적

bind()는 this 키워드를 첫 번째 인수로 지정된 특정 개체에 바인딩하는 새 함수를 반환합니다. 이렇게 하면 바인딩된 함수가 호출될 때 호출 방법에 관계없이 this 키워드가 항상 지정된 개체를 참조하게 됩니다.

사용 예

다음 코드를 고려하세요.

이 예에서는 myButton 개체 내에 click() 메서드가 정의되어 있습니다. click()이 객체에서 직접 호출되면 myButton 객체를 참조하므로 "OK clicked"가 올바르게 인쇄됩니다. 그러나 본질적으로 무료 함수인 LooseClick 변수에 click()을 할당하면 this 키워드는 더 이상 myButton을 참조하지 않으며 기본값은 전역 컨텍스트로 설정됩니다.

this 키워드가 바인딩된 상태로 유지되도록 하려면 myButton에서는 바인딩()을 사용합니다. boundClick 변수는 바인딩(myButton)을 사용하여 myButton 객체를 click() 메서드에 바인딩하여 생성됩니다. boundClick()이 호출되면 this 키워드가 myButton에 올바르게 바인딩되어 원하는 동작이 보장됩니다.

추가 인수 바인딩

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();
var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis
var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

또한 this 개체 뒤에 추가 인수를 바인딩()에 전달할 수도 있습니다. . 이러한 인수는 새 함수에 미리 바인딩되므로 부분적으로 적용되는 함수를 쉽게 만들 수 있습니다. 예를 들면 다음과 같습니다.

이 예에서는 sum() 함수를 null(초기 값이 없음을 의미)에 바인딩하고 5를 첫 번째 인수로 전달합니다. 결과 add5() 함수는 (일반적인 두 개의 인수 대신) 단일 인수로 호출될 수 있으며 항상 해당 인수에 5를 추가합니다.

결론

bind() 메서드 this 키워드를 명시적으로 제어하기 위한 JavaScript의 강력한 도구입니다. 이를 통해 독립적으로 호출될 때 올바른 컨텍스트를 유지하는 바인딩된 함수를 쉽게 만들 수 있습니다. 화살표 함수의 출현과 함께 일반적으로 사용되지 않을 수 있지만, 바인딩()은 this 키워드 제어가 중요한 특정 시나리오에서 여전히 유용한 도구로 남아 있습니다.

var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10)); // prints 15

위 내용은 JavaScript의 `bind()` 메소드는 `this` 키워드를 어떻게 제어합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!