Javascript의 `bind()`, `call()` 및 `apply()`: 각각 언제 사용해야 합니까?

Javascript의 바인딩()과 call() 및 Apply(): 각각 언제 사용합니까?

call() 및 Apply() 동안 둘 다 특정 컨텍스트 내에서 함수를 호출하는 데 사용됩니다(함수 내에서 this 키워드를 설정하여). 주요 차이점은 인수가 함수에 전달되는 방식에 있습니다. call()은 인수가 쉼표로 구분된 목록으로 전달될 것으로 예상하는 반면 Apply()에는 인수 배열이 필요합니다.

bind() 메서드 사용

달리 call() 및 apply(), 바인딩()은 함수를 즉시 호출하지 않습니다. 대신, 나중에 호출할 때 원래 함수를 호출하기 위한 올바른 컨텍스트가 설정된 새 바인딩된 함수를 반환합니다. 이는 비동기 콜백이나 이벤트에서 컨텍스트를 유지하려는 상황에서 특히 유용합니다.

예를 들어 다음 코드를 고려하세요.

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

onClick 핸들러에서 this 키워드 이벤트가 비동기적으로 트리거되는 경우에도 이벤트 리스너를 생성한 MyObject 인스턴스를 참조합니다.

사용 시기 호출/적용 및 바인딩

함수를 즉시 호출하고 해당 컨텍스트를 수정해야 하는 경우 call() 또는 apply()를 사용하세요. 반대로 이벤트와 같은 특정 컨텍스트에서 나중에 함수를 호출할 수 있도록 하려면 바인딩()을 사용하십시오.

다음은 간단한 그림입니다.

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)()); // 81
alert(obj.getX.call(obj));   // 81
alert(obj.getX.apply(obj));  // 81

세 가지 시나리오 모두에서 , 모든 함수가 obj 컨텍스트 내에서 getX 함수를 호출하므로 출력은 81입니다. 그러나 바인딩() 버전은 실행 시 원하는 컨텍스트가 설정되는 새 함수를 반환합니다.

위 내용은 Javascript의 `bind()`, `call()` 및 `apply()`: 각각 언제 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!