본문 바로가기
웹(web)/프론트엔드-javascript

[Function]this, apply, call

by 바코94 2020. 6. 1.

arguments 

함수에서는 인자 개수가 부족하면 undifined로 된다. 인자 개수에 맞지 않게 다양하게 호출해보면 알 수 있다.

 

this

js에서 함수를 보면 this를 많이 사용한다. 굉장히 단순하다. 함수를 호출한 객체가 this이다. 

var obj = {

  name : "obj";

  add : function(){

     console.log(this.name);

   }

}

 

obj.add();

 

호출한 객체가 obj이기 때문에 this.name 은 "obj"가 된다.

 

var obj2 = {name: "obj2"};

obj2.fun = obj.add;

obj2.fun();

이렇게 하면 호출한 객체가 obj2이기 때문에 this.name 은 "obj2"가 된다.

 

객체에서 속성으로 함수를 추가하여 호출하면 this는 그 객체이다.

 

그렇다면 객체 없이 그냥 함수 호출을하면 this는 무엇일까? 

답은 전역 객체이다. 브라우저에서는 window이다. node.js에서는 global이다. 우리는 브라우저 상에서 연습하고 있으므로 window로 보면 된다. 

전역 객체에서는 전역 변수들과 전역 함수들을 사용할 수 있다. 

 

함수 안에 내부함수가 있는 경우와 생성자 방식으로 함수를 만들 때 등에 따라 this을 정하는 것이 굉장히 복잡하다. 우리는 apply를 사용하여 단순화 할 수 있다.

 

함수이름.apply(this가 될 객체, 함수 매개변수)

 

var foo = {name: 'foo~~'}
function fun(a,b){
  console.log(this.name);
  console.log(a +b);
}

fun.apply(foo, [1, 2] );

다음과 같은 코드를 실행하면 명시적으로 this를 foo로 지정할 수 있다.

apply 대신 call을 사용하면 다음과 같다.

fun.call(foo, 1, 2);

call은 this할 객체 다음에 매개변수를 나열하면 된다. apply는 매개변수를 배열 형태에 넣어서 호출한다. 

따라서, apply을 써야 함수에서 arguments 객체를 배열처럼 쓸 수 있다.

'웹(web) > 프론트엔드-javascript' 카테고리의 다른 글

[Prototype] Prototype Chaining  (0) 2020.06.02
[Function] return value  (0) 2020.06.01
[Function] varient using function  (0) 2020.06.01
[Function] Function property  (0) 2020.05.31
[Function] Funtion create  (0) 2020.05.31