[JavaScript] 자바스크립트 this와 apply, call 함수

자바스크립트에서의 this

 자바스크립트에서 this는 렉시컬 스코프에 따라 나타내는 의미가 달라집니다. 기본적으로 this는 window 객체, 즉 전역 객체를 나타냅니다. 그렇다면 this가 전역 객체가 되지 않는 경우를 한번 알아보겠습니다.

 

메서드를 호출하는 경우

예시

var one = {
  a : 1,
  b : 2,
  // this는 함수가 선언된 환경을 가리킴
  sum : function() {return this.a + this.b}
}

console.log(one.sum()); // 결과: 3

위와 같이 객체 리터럴 방식으로 객체를 생성하고 그 안의 메서드를 호출하게 되면 this는 해당 메서드를 포함하고 있는 객체를 나타내게 됩니다. 이것을 this가 객체에 바인딩되었다고 합니다.

 

생성자 함수를 호출하는 경우

예시

function Number(a) {
  // 함수가 선언된 환경이 전역이므로 this는 window를 나타냄
  this.a = a;  
}

var one = new Number(1);
console.log(one.a); // 결과: 1

 new를 붙여서 생성자 함수를 호출하면 this는 생성자 함수에 의해 만들어진 인스턴스를 나타냅니다. 위 예시에서 1을 인자로 받는 Number객체를 생성하는데 이 때, 1은 Number의 멤버인 a속성에 대입됩니다. 따라서 one.a와 같이 해당 인스턴스의 a값에 접근하고 있는 것을 확인할 수 있습니다.

 

apply 함수

 apply 함수는 모든 함수에 존재하는 속성입니다. apply함수를 이용하면 함수를 호출할 때 그 함수안에 있는 this의 의미를 명시적으로 정할 수 있습니다.

 

예시

var Number = function (a) {
  this.a = a;
};

var one = {};
// Number를 호출할 때 조건을 줌
Number.apply(one, ['num']);
console.log(one.a);

위 예시에서는 apply함수로 Number에 접근하여 호출하고 있습니다. apply함수의 첫 번째 인자로 one 객체를 넣었는데 이것은 Number 함수에 있는 this를 one 객체로 취급하겠다는 의미입니다. 따라서 Number 함수를 호출할 때 one.a = a가 실행되고 아무것도 없던 one 객체에 a 프로퍼티가 추가됩니다.

 

두 번째 인자로 arguments 값을 넣었는데 이것은 Number 함수를 호출할 때 해당 arguments 값을 전달 인자로 전달하라는 의미입니다. 따라서 a의 값은 'num'이 되고 최종적으로 Number함수를 호출할 때 one.a = 'num'이 실행되는 것입니다. (두 번째 인자는 아무것도 넣어주지 않아도 됩니다.)

 

 

결과

'num'

 

call 함수

 call 함수는 apply 함수와 같은 기능을 하지만 두 번째 인자를 arguments 값이 아닌 그냥 인자들을 받을 수 있다는 차이가 있습니다.

 

예시

var Number = function (a) {
  this.a = a;
};

var one = {};
Number.call(one, 'num');
console.log(one.a); 

 

결과

'num'