[JavaScript 문법] 그래서 this가 몬데 - 2

4.객체의 메서드로서 this

객체에 메서드로 정의된 함수를 호출하면 this 값은 그 객체가 된다. (당연한 것이다. 메서드의 상위 객체는 당연히 자기가 속한 객체니까)

var o = {
  prop: 37,
  f: function () {
    //객체의 메서드로 들어있는 함수 f
    return this.prop;
  },
};

console.log(o.f()); // 37

또한 기존에 정의된 함수를 객체에 넣어도 동일한 결과를 가져온다.

var o = { prop: 37 };
function independent() {
  return this.prop;
}

o.f = independent; //o 객체에는 이제 prop과 f가 들어있다

console.log(o.f()); // o의 멤버로서 f 호출

객체의 멤버로 있는 하위객체 안의 메서드의 경우, 가장 가까운 메서드를 바인딩한다.

다음의 예제를 보자.

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

function independent() {
  return this.prop;
}

o.b = { g: independent, prop: 42 };
console.log(o.b.g()); //  42

o.b.g 메서드의 this는 가장 가까운 메서드, 즉 o.b메서드를 바인딩한다.
o.b 객체가 o 객체에 속해있다는 사실은 중요하지 않다. g 메서드 입장에서는 o.b 객체가 가장 가까운 객체이기 때문이다.

5. 생성자에서의 this

new 키워드로 함수를 생성자로 사용하면, this는 새로 생긴 객체에 묶인다.

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37

function C2() {
  this.a = 37;
  return { a: 38 };
}

o = new C2();
console.log(o.a); // 38

6. DOM 이벤트 처리기에서의 this

이벤트를 처리하는 함수에서의 this는 이벤트의 타깃이 되는 요소가 된다.
(※ addEventListener로 요소를 가져올때만 유효)

function bluify(e) {
  console.log(this === e.currentTarget); //this는 이벤트의 타깃이 되는 요소이므로 true

  this.style.backgroundColor = "#A5D9F3";
}

// 문서 내 모든 요소를 가져옴
var elements = document.getElementsByTagName("*");

//click 누르면 blurify 함수 실행
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", bluify, false);
}

출처

MDN - this