>  기사  >  웹 프론트엔드  >  활용 방법: call 및 apply_javascript 기술

활용 방법: call 및 apply_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:49:041174검색

ECMAScript v3에서는 이 두 메서드가 Function 프로토타입에 대해 정의되어 있습니다. 이 두 메서드의 기능은 동일합니다. 이 두 메서드를 사용하면 다른 객체 메서드를 호출하는 것처럼 함수를 호출할 수 있습니다. 위에 복사했지만 적어도 그게 무슨 뜻인지 이해하지 못했습니다.
다음은 간단하고 이해하기 쉽습니다. 먼저 코드를 살펴보겠습니다.

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

function Introduce(이름,나이)
{
Document.write("내 이름은 " name "입니다.
}
var p=new People()
Introduce.call(p,"Windking" ,20) ;

위의 코드에 대해 이야기해 보면, Introduce가 p의 메소드가 됩니다. 호출 메소드를 사용하면 위 코드는 다음 코드와 동일합니다.

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

function People(이름,나이)
{
this.name=name;
this.age=age;
this.Introduce=function(){
document.write("제 이름은 " name "입니다. );
};
}

의미를 이해하셨나요? 적용해도 같은 효과가 있습니다.
이 방법이 실제로 어떻게 사용되는지에 관계없이 먼저 문법에 대해 이야기해 보겠습니다.
call은 하나 이상의 매개변수를 허용합니다. call의 첫 번째 매개변수는 필요한 객체를 참조합니다. 예를 들어 위의 예에서 Introduce 메소드는 객체 p가 호출할 수 있기를 희망하며 p를 첫 번째 매개변수로 사용합니다. 매개변수. 나머지 매개 변수 수는 임의적이며 Introduce 메서드의 매개 변수로 사용됩니다. 순서는 Introduce 매개변수가 선언된 순서입니다. 예를 들어 Introduce.call(p,"Windking",20), Introduce가 p의 인스턴스 메서드인 경우 p.Introduce("Windking",20)과 같습니다. 이해했나요? 전달된 매개변수의 순서는 함수에서 매개변수가 선언된 순서와 일치해야 한다는 점을 기억하세요.
호출을 이해하고 나면 Apply와 Call의 유일한 차이점은 호출은 하나 이상의 매개변수를 허용하는 반면 적용은 두 개의 매개변수만 허용한다는 점입니다. 매개변수는 아래 첨자 모음이 있는 매개변수입니다. 예를 들어 Introduce.call(p,"Windking",20)은 Introduce.apply(p,["Windking",20])로 다시 작성할 수 있습니다. 이번에는 이해가 되셨나요?
그럼 이 두 가지 방법의 용도는 무엇인가요? 위의 기능만 구현하고 싶다면 Introduce를 People의 메소드로 구현하는 것이 더 좋지 않을까요?

지원서를 두 가지 항목으로 요약합니다.

1. 공유방법. 먼저 코드를 살펴보겠습니다.

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

function Introduce(이름,나이)
{
         document.write("내 이름은 " name "입니다.
}

이것은 자기 소개 방법입니다. 이제 남학생 반과 여학생 반이 있다고 가정해 보겠습니다. (저는 시연을 위해 여기에 왔고 실제로는 People 상위 클래스를 사용하겠습니다.) 왜냐하면 Introduce는 모두 동일하기 때문입니다. , 이 방법을 공유할 수 있습니다.

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

function Boy()
{
this .BoyIntroduce=function(){
Introduce.call(this,name,age)
}
}

마찬가지로 Girl에서도 마찬가지입니다. 이 경우 코드 작성을 피할 수 있습니다. 사실 이것은 다음과 같이 쓸 수도 있기 때문에 다소 이해하기 어렵습니다.

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

function Boy()
{
this .BoyIntroduce=function(){
     Introduce(이름,나이)
}
}

그러나 이때 Apply를 사용하면 훨씬 간단해 보입니다.

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

function Boy()
{
this .BoyIntroduce=function(){
Introduce.apply(this,arguments)
}

훨씬 더 간단하지 않나요? 매개변수가 많으면 그렇게 조밀하게 매개변수를 작성할 필요가 없습니다!

2. 도메인 간 통화

간단한 예 보기(단지 시연용이며 가치 없음):

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

function Boy(이름,나이)
{
this.BoyIntroduce=function(){
document.write("제 이름은 " name "입니다. 저는 " age)입니다.
}
}
function Girl(name, 나이)
{

}

이것은 Boy 및 Girl 클래스이고 다음 코드를 작성합니다.

var b=new Boy("Windking",20)
b.BoyIntroduce();

이에 대해서는 이의가 없습니다. 어느 날 한 소녀가 자신을 소개하고 싶어하고 가끔씩만 사용한다고 가정해 보겠습니다. 그러면 다른 소녀들은 수줍음이 많고 자기 소개를 좋아하지 않기 때문에 Girl 클래스를 수정할 필요가 없습니다. 그렇다면 이 시간에 할 수 있겠네요.

var g=new Girl("Xuan",22)

Introduce.call(g,"Xuan",22);

3. 실제 사용 - 상속

자, 위의 내용은 모두 사소하고 정제되지 않은 것입니다. 다음은 구조 상속에 사용되는 호출 및 적용의 가장 널리 사용되는 응용 프로그램입니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.