Javascript의 호출, 적용 및 바인드 메소드 간의 소스 및 접점 차이점에 대한 자세한 설명과 예제

call/apply/bind 메소드의 유래

우선 call, Apply, Bind 메소드를 사용할 때 이 세 가지 메소드가 어디서 나온 것인지 알아야겠죠? 이 세 가지 방법을 사용할 수 있는 이유는 무엇입니까?

call, Apply 및 Bind 세 가지 메서드는 실제로 Function.prototype에서 상속되었으며 인스턴스 메서드입니다.

 console.log(Function.prototype.hasOwnProperty('call')) //true
 console.log(Function.prototype.hasOwnProperty('apply')) //true
 console.log(Function.prototype.hasOwnProperty('bind')) //true

위 코드에서는 true가 반환되어 세 가지 메서드가 Function.prototype에서 상속되었음을 나타냅니다. 물론 일반 객체, 함수, 배열은 모두 Function.prototype 객체의 세 가지 메서드를 상속하므로 이 세 가지 메서드를 객체, 배열, 함수에서 사용할 수 있습니다.

콜백 함수에 바인딩된 개체

이 개체가 콜백 함수에 사용되는 경우 이 개체는 버튼 개체인 DOM 개체를 가리킵니다. 콜백 함수에서 이러한 가리키는 문제를 해결하려면 다음 방법을 사용할 수 있습니다.

var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });

버튼을 클릭하면 콘솔에 true가 표시됩니다. Apply 메소드(또는 call 메소드)는 함수가 실행된 객체를 바인딩할 뿐만 아니라 함수를 즉시 실행하기 때문에(바인드 메소드는 즉시 실행되지 않으므로 차이점에 유의하시기 바랍니다.) 바인딩 문은 다음과 같이 작성해야 합니다. 기능 본체.

call, Apply, Bind 메서드의 연결과 차이점

사실 이 세 가지 메서드는 함수 내부에서 this 포인터를 지정하는 데 사용됩니다. 비슷하지만 형식적인 차이가 있습니다. 독자는 세 가지 방법으로 위의 예를 구현해 볼 수 있습니다.

　call, Apply, Bind 메소드를 요약하면:

　a: 첫 번째 매개변수는 함수(함수가 실행되는 범위) 내에서 this의 포인터를 지정하고 지정된 범위에 따라 함수를 호출합니다. .

　b: 함수 호출 시 매개변수를 전달할 수 있습니다. call 메소드와 바인딩 메소드는 직접 전달해야 하고, Apply 메소드는 배열 형태로 전달해야 합니다.

　c: call 및 apply 메소드는 호출 직후 함수를 실행하는 반면, 바인딩 메소드는 즉시 실행되지 않아 함수를 다시 실행해야 합니다. 좀 폐쇄적인 냄새가 나네요.

　d: 이 객체의 포인팅 변경에는 호출, 적용 및 바인드 메소드가 포함될 뿐만 아니라 해당 변수를 사용하여 이 객체의 포인팅을 수정할 수도 있습니다.

위 내용은 Javascript의 호출, 적용 및 바인드 메소드 간의 소스 및 접점 차이점에 대한 자세한 설명과 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!