JavaScript의 `call()`, `apply()` 및 `bind()` 메소드의 차이점은 무엇입니까?

Javascript의 call(), apply(), 바인딩() 메소드 차이점 이해

Javascript에서는 call()과 apply() 메소드를 통해 개발자는 함수의 컨텍스트(this)를 지정하고 인수를 전달할 수 있습니다. 두 메서드 모두 유사한 목적을 수행하지만 인수가 함수에 제공되는 방식이 다릅니다.

bind()를 언제 사용해야 합니까?

bind() 메서드는 자체적으로 구별됩니다. call() 및 apply()에서 원래 함수의 컨텍스트를 유지하는 새 함수를 생성할 수 있습니다. 이는 비동기 콜백이나 이벤트를 처리할 때 유용합니다.

다음 코드 조각을 고려하세요.

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

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

위의 예에서 볼 수 있듯이, 바인딩()은 나중에 실행될 때 새 함수를 반환합니다. , 원래 함수의 컨텍스트(this)를 유지합니다. 이를 통해 비동기 콜백 및 이벤트에서 컨텍스트를 쉽게 보존할 수 있습니다.

이벤트 및 비동기 콜백에서의 사용

본과 같이 바인드()의 일반적인 사용 사례에는 이벤트 리스너가 포함됩니다. 아래 코드에서:

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()이 메서드는 이벤트에 의해 트리거될 때 이벤트 리스너를 시작한 MyObject 인스턴스의 컨텍스트를 유지합니다. 바인딩()이 없으면 onClick() 메서드의 컨텍스트는 예상한 인스턴스가 아닐 것입니다.

bind() 구현

bind( ) 메서드는 다음과 같이 구현할 수 있습니다.

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

이 단순화된 구현은 제공된 컨텍스트를 사용하여 원래 함수를 호출하는 새 함수를 생성합니다. (ctx) 및 인수. 원래 Function.prototype.bind() 구현은 추가 인수 전달과 같은 추가 시나리오를 처리하기 때문에 더 복잡합니다.

위 내용은 JavaScript의 `call()`, `apply()` 및 `bind()` 메소드의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!