자바스크립트 함수 4가지 패턴에서의 this 사용

자바스크립트에는 함수를 호출하는데 메서드 호출패턴, 함수호출 패턴, 생성자 호출패턴, apply 호출패턴이라는 네가지 패턴이 있다. 각각의 패턴에 따라 this 라는 매개변수를 다르게 초기화 한다.

1. 메서드 호출 패턴
함수를 객체의 속성에 저장하는 경우 이 함수를 메서드라 부르며, 이때 this는 메서드를 포함하는 객체에 바인딩된다.

var oj = {
  value: 99,
  get_value: function () {
    alert(this.value);
  }
};
oj.get_value();  // 99

2. 함수 호출 패턴
함수가 객체의 속성이 아닌 단지 함수(function)로서 호출될때, this는 전역객체에 바인딩된다
.

var doSomething = function () {
  alert(this); // window
};

3. 생성자 호출 패턴
함수를 new라는 전치 연산자와 함께 호출하면, 호출한 함수의 prototype 속성값에 연결된 (숨겨진) 링크를 갖는 객체가 생성되고, this 는 이 새로운 객체에 바인딩된다.

var Obj = function (str) {
  this.status = str;
};

Obj.prototype.get_status = function () {
  return this.status;
};

var myObj = new Obj("going");
myObj.get_status() // "going"

4. apply(또는 call) 호출 패턴
apply 매서드는 this의 값을 선택할 수 있도록 해준다. apply 메서드에는 매개변수 두개가 있는데, 첫째는 this 에 묶이게 될 값이며, 두번째는 매개변수들의 배열이다.

var statusOj = {
  status : 'Z-OK'
};

// 3번에서 정의한 Obj 객체를 이용하자
Obj.prototype.get_status.apply(statusOj);  // "Z-OK"

출처 : http://beizix.blogspot.com/2010/11/javascript-this.html

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다