apply()와 call()_javascript 기술 간의 차이점과 관계를 명확히 합니다.

자유롭고 끊임없이 변화하는 언어인 자바스크립트를 배우는 과정에서 이런 느낌을 받았다면 이제부터는 '선입견'을 접어두세요. 이곳은 분명 당신에게 새로운 세상이니까요. 자바스크립트를 천천히 녹여주세요. 이전에 확고해진 프로그래밍 의식과 새로운 활력을 불어넣으세요!
자, 다시 본론으로 돌아가서 먼저 JavaScrtipt의 동적 변경 런타임 컨텍스트 기능을 이해해 보겠습니다. 이 기능은 주로 적용 및 호출 메소드의 사용에 적용됩니다. 🎜>적용구별을 위해 call은 한 문장으로

코드복사코드는 다음과 같습니다.

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

전화, 모두 적용 Function.prototype에 속함 JavaScript 엔진에 의해 내부적으로 구현되는 메소드입니다. Function.prototype에 속하기 때문에 각 Function 객체 인스턴스, 즉 각 메소드는 메소드의 속성이므로 해당 속성을 갖습니다. 사용법은 물론 메소드에 관한 것입니다. 이 두 메소드는 동일한 기능을 가지고 있지만 단지 사용법이 다를 뿐입니다.
유사점: 두 메소드의 효과는 완전히 동일합니다.
차이점: 메소드가 전달됩니다. 매개변수가 다릅니다
그러면 메소드의 역할은 무엇이며, 메소드가 전달하는 매개변수는 무엇입니까?
foo.call(this, arg1, arg2, arg3)을 분석해 볼까요?
foo는 메소드이고, 이는 메소드가 실행될 때 컨텍스트 관련 객체이고, arg1, arg2, arg3은 메소드가 실행될 때 foo 메소드에 전달되는 매개변수입니다. 여기서 객체지향 프로그래밍의 기초가 있다면 이해하기 쉽습니다. 변환된 객체의 클래스 인스턴스에 있습니다.
JavaScript에서 코드는 항상 컨텍스트 객체를 가지며 코드는 이를 처리합니다. object.컨텍스트 개체는 this 변수로 표시되며 이 변수는 항상 현재 코드가 있는 개체를 가리킵니다. 中.
이것이 무엇인지 더 잘 이해하려면

코드 복사 코드는 다음과 같습니다.

/클래스 A 생성
함수 A(){
//클래스가 인스턴스화되면 다음 코드가 실행됩니다
//이때 실행 컨텍스트 개체는 현재 인스턴스인 this입니다. Object
this.message = "message of a"; 🎜>this.getMessage = function(){
return this.message;
}
}
//클래스 A 인스턴스 객체 생성
var a = new A(); >//클래스 인스턴스 getMessage 메서드를 호출하여 메시지 값을 가져옵니다.
alert(a.getMessage())
//클래스 B 만들기
function B(){
this.message = "b의 메시지";
this.setMessage = function(msg){
this.message = msg;
}
}
//클래스 B 인스턴스 객체 생성
var a = new B();


여담: JavaScript 객체의 모든 속성은 공개(public)이며 비공개(private)와 같은 것이 없으므로 메시지 속성에 직접 액세스할 수도 있습니다. 🎜>alert(a.message);
클래스 A와 B에는 모두 메시지 속성(객체 지향 용어로 멤버)이 있고 A에는 메시지를 가져오기 위한 getMessage 메서드가 있음을 알 수 있습니다. 메시지 설정 방법은 아래와 같습니다.

코드 복사

> //b의 setMessage 메소드를 객체 a에 동적으로 할당합니다. a 자체에는 이 메소드가 없습니다. b.setMessage.call(a, "a's message"); / /다음은 "a의 메시지"를 표시합니다. alert(a.getMessage()); //a의 getMessage 메소드를 객체 b에 동적으로 할당합니다.

이것이 동적 언어 JavaScript 호출의 힘입니다!
이는 단순히 "무에서 만들어진" 것입니다. 객체의 메소드는 임의로 할당될 수 있지만 객체 자체에는 그러한 메소드가 없었습니다. 평신도의 관점에서 보면 작업을 완료하기 위해 메서드를 다른 개체에 빌려주는 것입니다. 원칙적으로는 메서드가 실행될 때 컨텍스트 개체가 변경됩니다.
그래서 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의 메시지"),
에서 "a의 메시지"가 매개변수로 전달되는 것을 볼 수 있습니다. 그러면 Apply에서는 어떻게 표현되는지 명확하지 않습니다. 한 눈에 알아볼 수 있도록 응용 시나리오를 설계해 보겠습니다.




코드 복사


코드는 다음과 같습니다.

함수 인쇄(a, b, c, d){
alert(a b c d)
}
함수 예제(a, b, c, d){
// 인쇄를 빌리려면 호출 메소드를 사용하고, 매개변수는 명시적으로 분할되어 전달됩니다.
print.call(this, a, b, c, d)
//인쇄를 빌리려면 적용 메소드를 사용하고, 매개변수는 배열로 전달됩니다.
//여기서 JavaScript 메소드의 인수 배열을 직접 사용합니다.
print.apply(this, 인수)
//또는 배열로 캡슐화합니다.
print .apply(this, [a, b, c, d]);
}
//아래에 "백라이트 스크립트"가 표시됩니다.
example("back", "light", "feet" , "this");

이 시나리오의 예제 메소드에서는 a, b, c, d가 메소드에 의해 전달된 매개변수로 사용됩니다.
마지막 문장은 예제 메소드를 직접 호출하기 때문에 이 메소드의 context 객체는 window 객체입니다.
따라서 호출 및 적용 메소드의 첫 번째 매개변수는 제외됩니다. , 실행 시 context 객체인 call 메소드의 다른 매개변수는 빌린 메소드에 차례로 매개변수로 전달됩니다. Apply에는 매개변수가 2개만 있고 두 번째 매개변수는 배열로 전달된다고 할 수 있습니다. Apply 메소드의 차이점은 두 번째 매개변수부터 호출 메소드 매개변수가 차례로 매개변수로 전달된다는 점입니다. Apply는 이러한 매개변수를 직접 배열에 넣은 다음 전달합니다. 최종 빌린 메소드의 매개변수 목록은 동일합니다.

응용 시나리오:
매개변수가 명확하면 호출을 사용할 수 있고, 매개변수가 명확하지 않으면 적용을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//예
print.call(window, "back", "light", "foot", "this");
//foo 매개변수는 여러 개일 수 있습니다.
function foo(){
print.apply(window, 인수) ; >}