다연이네

[days06] js call()/apply() 메소드 본문

Web/JavaScript

[days06] js call()/apply() 메소드

 다연  2020. 12. 16. 13:19
반응형

call()/apply() 메소드 
객체를 매개변수로 사용하여 메소드를 호출하는 함수

 

<script>
var person1 = {	name:"jun", age:"24", print: function() {return this.name+"/"+this.age} */};
var person2 = {	name:"yeon",
		age:"23"
		print: function() {
		   return this.name+"/"+this.age
	    	}
		};  
</script>

위의 person1과 person2에서 이름, 나이 출력하는 print() 메소드가 중복된다. 
=>이 메소드만을 가지는 객체를 따로 선언하자

 

<script>
var person1 = {	name:"jun", age:"24",}; //js객체
var person2 = {	name:"yeon",
		age:"23"			
		};  //js객체

var person = {
		print: function() {
		   return this.name+"/"+this.age
			}	
		};
</script>

이 메소드를 호출하는 방법은 다음과 같다.

person.print.call(person1);

person.print.apply(person1);

 

<script>

document.write(person.print.call(person1)+"<br>");  //jun/24
document.write(person.print.call(person2)+"<br>");  //yeon/23

document.write(person.print.apply(person1)+"<br>");  //jun/24
document.write(person.print.apply(person2)+"<br>");  //yeon/23

</script>

위 상황에는 call과 apply가 같은 결과를 출력한다. 

그렇다면 차이점은 무엇일까?

 

메소드에 자체 매개변수가 있을 경우 call()/apply() 사용에 차이가 있다.

<script>

var person1 = {	name:"jun", age:"24",}; 
var person2 = {	name:"yeon", age:"23"};
						
var person = {	
		print: function(city, country) {  //매개변수 !!
		   return this.name+"/"+this.age
		    +city+"/"+country;
			}	
		};

메소드에 매개변수가 있는 경우,

call()을 사용해 호출시 인자를 나열한다. call(person1, '매개변수1', '매개변수2', ... );

apply()를 사용해 호출시 인자를 배열처럼 작성한다. apply(person1, [ '매개변수', '매개변수', ... ] );

<script>

//call() 인자 나열
document.write(person.print.call(person1, 'c', 'c')+"<br>");  //jun/24c/c

//apply() 배열 인자
document.write(person.print.apply(person2, ['c','c'])+"<br>");  //yeon/23c/c

</script>
반응형
Comments