> 웹 프론트엔드 > JS 튜토리얼 > JavaScript_Basic 지식 중 호출 방식과 적용 방식의 사용 비교

JavaScript_Basic 지식 중 호출 방식과 적용 방식의 사용 비교

WBOY
풀어 주다: 2016-05-16 15:45:34
원래의
1501명이 탐색했습니다.

메소드 정의
통화 방법:
구문: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
정의: 현재 객체를 다른 객체로 대체하기 위해 객체의 메소드를 호출합니다.
설명:
호출 메소드는 다른 객체를 대신하여 메소드를 호출하는 데 사용될 수 있습니다. call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경합니다.
thisObj 매개변수가 제공되지 않으면 Global 개체가 thisObj로 사용됩니다.

신청방법 :
구문: apply([thisObj[,argArray]])
정의: 객체의 메소드를 적용하여 현재 객체를 다른 객체로 대체합니다.
설명:
argArray가 유효한 배열이 아니거나 인수 객체가 아닌 경우 TypeError가 발생합니다.
argArray나 thisObj가 모두 제공되지 않으면 전역 개체가 thisObj로 사용되며 매개 변수를 전달할 수 없습니다.

일반적인 예
아、

function add(a,b) 
{ 
 alert(a+b); 
} 
function sub(a,b) 
{ 
 alert(a-b); 
} 
 
add.call(sub,3,1); 
로그인 후 복사

이 예의 의미는 sub를 add, add.call(sub,3,1) == add(3,1)로 바꾸는 것입니다. 따라서 실행 결과는 다음과 같습니다. Alert(4) // 참고: js에서; 함수는 실제로 객체이고, 함수 이름은 Function 객체에 대한 참조입니다.

b.

function Animal(){ 
 this.name = "Animal"; 
 this.showName = function(){ 
  alert(this.name); 
 } 
} 
 
function Cat(){ 
 this.name = "Cat"; 
} 
 
var animal = new Animal(); 
var cat = new Cat(); 
 
//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。 
//输入结果为"Cat" 
animal.showName.call(cat,","); 
//animal.showName.apply(cat,[]); 
로그인 후 복사

호출은 원래 cat에 동물의 메소드를 넣어서 실행한다는 의미입니다.
c. 상속 구현

function Animal(name){  
 this.name = name;  
 this.showName = function(){  
  alert(this.name);  
 }  
}  
 
function Cat(name){ 
 Animal.call(this, name); 
}  
 
var cat = new Cat("Black Cat");  
cat.showName(); 
로그인 후 복사
Animal.call(this)은 이 객체 대신 Animal 객체를 사용한다는 의미입니다. 그렇다면 Cat은 Animal의 모든 속성과 메소드를 가지고 있지 않습니까? Cat 객체는 Animal의 메소드와 속성을 직접 호출할 수 있습니다.

d. 다중 상속


function Class10() 
{ 
 this.showSub = function(a,b) 
 { 
  alert(a-b); 
 } 
} 
 
function Class11() 
{ 
 this.showAdd = function(a,b) 
 { 
  alert(a+b); 
 } 
} 
 
function Class2() 
{ 
 Class10.call(this); 
 Class11.call(this); 
} 
로그인 후 복사
매우 간단합니다. 다중 상속을 달성하려면 두 번의 호출을 사용하세요
물론 프로토타입 체인을 사용하는 등 js를 상속하는 다른 방법도 있습니다. 이는 이 기사의 범위에 포함되지 않습니다. 여기서는 호출 사용법만 설명합니다. 호출과 적용에 관해 말하면 이 두 메서드는 기본적으로 동일한 의미입니다. 차이점은 호출의 두 번째 매개 변수는 모든 유형이 될 수 있지만 적용의 ​​두 번째 매개 변수는 배열이거나 인수일 수 있다는 것입니다. 🎜>

자바스크립트의 호출 및 적용 메소드는 주로 함수 객체의 컨텍스트, 즉 함수에서 이것이 가리키는 내용을 변경하는 데 사용됩니다.

호출 방법은 다음과 같습니다.

구체적인 예:
fun.call(obj1, arg1, arg2, ...);
fun.apply(obj2, [arrs]);

로그인 후 복사

예제에서 볼 수 있듯이 기존 방식으로 say를 호출하면 메소드 내 this가 Obj1을 가리키지만, call과 Apply를 통해 호출하면 this는 Obj2를 가리킵니다.
var Obj1 = {
 name: 'Object1',
 say: function(p1, p2) {
  console.log(this.name + ' says ' + p1 + ' ' + p2);
 }
};

// logs 'Object1 says Good morning'
Obj1.say('Good', 'morning');

var Obj2 = {
 name: 'Object2'
};

// logs 'Object2 says Good afternoon'
Obj1.say.call(Obj2, 'Good', 'afternoon');

// logs 'Object2 says Good afternoon again'
Obj1.say.apply(Obj2, ['Good', 'afternoon again']);

로그인 후 복사
예제에서 볼 수 있듯이 call과 apply의 기능은 완전히 동일하며 호출 방식의 차이점은 매개변수 목록뿐입니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿