javascript_javascript 기술에서 apply()와 call() 메소드의 차이점에 대한 심층적인 이해

동적 언어를 접해본 적이 없다면, 컴파일된 언어의 사고 방식으로 JavaScript를 이해하는 것은 마술적이고 이상한 느낌일 것입니다. 왜냐하면 의식적으로 불가능한 일이 종종 발생하고 심지어 불합리하다고 느끼기 때문입니다. 자유롭고 끊임없이 변화하는 언어인 자바스크립트를 사용하는 과정에서 이런 느낌을 접하게 된다면, 이제부터 여러분의 '선입견'을 내려놓고, 이곳은 분명 신대륙이기 때문에, 자바스크립트가 서서히 녹아내리도록 해주세요. 확고한 프로그래밍 의식을 확립하고 새로운 활력을 불어넣으세요!

자, 본격적으로 시작해 보겠습니다. 먼저 JavaScrtipt의 동적으로 변화하는 런타임 컨텍스트 특성을 이해하세요. 이 기능은 주로 적용 및 호출 메서드 사용에 반영됩니다.

신청과 전화의 차이는 단 한 문장입니다

foo.call(this, arg1,arg2,arg3) == foo.apply(this, 인수)==this.foo(arg1, arg2, arg3)

call과 apply는 모두 Function.prototype의 메소드로, JavaScript 엔진에 의해 내부적으로 구현됩니다. 이는 Function.prototype에 속하기 때문에 각 Function 객체 인스턴스, 즉 각 메소드는 call과 apply 속성을 갖습니다. method 이면 당연히 메소드를 대상으로 합니다. 이 두 메소드는 동일한 기능을 갖고 있지만 다른 방식으로 사용되기 때문에 혼동하기 쉽습니다.

동일점: 두 방법은 완전히 동일한 효과를 가집니다

차이: 메소드에 전달된 매개변수가 다릅니다

그럼 메소드의 기능은 무엇이며, 메소드가 전달하는 매개변수는 무엇인가요?

위의 foo.call(this, arg1, arg2, arg3)을 분석해 보겠습니다.

foo는 메소드입니다. 이는 메소드가 실행될 때 상황에 맞는 객체이고, arg1, arg2, arg3은 여기서 메소드가 실행될 때 foo 메소드에 전달되는 매개변수입니다. 객체지향 프로그래밍의 기초가 있다면 아주 이해하기 쉽습니다.

클래스가 인스턴스화된 후 객체에 있습니다.

JavaScript에서 코드는 항상 컨텍스트 개체를 가지며 코드는 이 개체를 처리합니다. 컨텍스트 개체는 this 변수로 표시되며 이 변수는 항상 현재 코드가 있는 개체를 가리킵니다.

이것이 무엇인지 더 잘 이해하기 위해 예를 들어보겠습니다.

/创建一个A类
function A(){
//类实例化时将运行以下代码
//此时的执行上下文对象就是this,就是当前实例对象
this.message = “message of a”;
this.getMessage = function(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>return this.message;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个A类实例对象
var a = new A();
//调用类实例getMessage方法获得message值
alert(a.getMessage());
//创建一个B类
function B(){
this.message = ”message of b”;
this.setMessage = function(msg){
<SPAN style="WHITE-SPACE: pre">	</SPAN>this.message = msg;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个B类实例对象
var a = new B();

클래스 A와 B 모두 메시지 속성(객체 지향 용어로 멤버)을 갖고 있음을 알 수 있습니다. A에는 메시지를 가져오는 getMessage 메서드가 있고 B에는 메시지 전원을 설정하는 setMessage 메서드가 있습니다. 통화 내용은 아래와 같습니다.

//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的!
b.setMessage.call(a, “a的消息”);
//下面将显示”a的消息”
alert(a.getMessage());
//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!

이것이 바로 동적언어 자바스크립트 호출의 힘입니다!

단순히 "무에서 만들어진 것"입니다. 객체의 메소드는 임의로 지정될 수 있지만 객체 자체에는 그러한 메소드가 있는 적이 없습니다. 원칙적으로 컨텍스트 개체는 메서드가 실행될 때 변경됩니다.

따라서 b.setMessage.call(a, "a's message");는 a를 실행 컨텍스트 객체로 사용하여 b 객체의 setMessage 메서드를 호출하는 것과 동일하며 이 프로세스는 b와 아무 관련이 없습니다. 효과는 a.setMessage("a's message");

와 동일합니다.

신청과 통화는 동일한 효과를 주기 때문에 라고 할 수 있습니다

전화 신청 기능은 내 전화처럼 다른 사람의 전화 방법을 빌려주는 것입니다.

좋아요, 호출과 적용의 유사점을 이해한 후, 기능에 이어 차이점을 살펴보겠습니다. 위의 예를 읽고 나면 아마 아실 것입니다.

b.setMessage.call(a, "a's message")는 a.setMessage("a's message")와 동일하며, call에서 "a's message"가 매개변수로 전달되는 것을 볼 수 있으며,

그렇다면 Apply에서는 어떻게 표현하는 걸까요? 직접적으로 설명하기는 애매한데, Apply를 애플리케이션 시나리오와 결합해서 한눈에 알아볼 수 있도록 해줘야 합니다.

function print(a, b, c, d){
alert(a + b + c + d);
}
function example(a, b , c , d){
//用call方式借用print,参数显式打散传递
print.call(this, a, b, c, d);
//用apply方式借用print, 参数作为一个数组传递,
//这里直接用JavaScript方法内本身有的arguments数组
print.apply(this, arguments);
//或者封装成数组
print.apply(this, [a, b, c, d]);
}
//下面将显示”背光脚本”
example(”背” , “光” , “脚”, “本”);

이 시나리오의 예제 메소드에서는 a, b, c, d가 메소드에 의해 전달된 매개변수로 사용됩니다. 메소드는 호출할 인쇄 메소드를 차용하기 위해 각각 apply 및 call을 사용합니다.

마지막 문장은 예제 메소드가 직접 호출되기 때문에 이 메소드의 context 객체는 window 객체입니다.

따라서 실행 중 컨텍스트 개체인 call 및 apply 메서드의 첫 번째 매개 변수를 제외하고 call 메서드의 다른 매개 변수는 차례로 빌린 메서드에 매개 변수로 전달되고 Apply에는 두 개의 매개 변수만 있습니다. , 두 번째 매개변수는 배열로 전달되므로

이라고 할 수 있습니다.

call 메서드와 Apply 메서드의 차이점은 두 번째 매개변수부터 호출 메서드 매개변수를 차례로 빌린 메서드에 매개변수로 전달하고, Apply는 이 매개변수를 직접 배열에 넣은 후 전달하고, 마지막으로 차용된 메소드의 매개변수 목록과 동일합니다.

적용 시나리오:

매개변수가 명확하면 호출을 사용할 수 있습니다. 매개변수가 명확하지 않으면 적용을 사용하여 인수를 결합할 수 있습니다

//例
print.call(window, “背” , “光” , “脚”, “本”);
//foo参数可能为多个
function foo(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>print.apply(window, arguments);
}

위 글은 자바스크립트에서 apply()와 call() 메소드의 차이점에 대해 심도있게 설명한 내용입니다. 모두 에디터가 공유한 내용이니 참고가 되셨으면 좋겠습니다. 스크립트 홈을 지원하게 됩니다.