[JavaScript] this 연산자 정복해보자

 

this 연산자

 

this가 어느 문맥에 있느냐에 따라 가리키는 값이 다르게 나타난다

 

전역문맥

  전역 실행 맥락에서 this는 전역 객체를 참조한다

 

  // 웹 브라우저에서는 window 객체가 전역 객체
  console.log(this === window); // true

  a = 37;
  console.log(window.a); // 37

  this.b = "MDN";
  console.log(window.b)  // "MDN"
  console.log(b)         // "MDN"

 

함수 문맥

함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우된다

 

단순 호출

다음 예제는 this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인

전역 객체를 참조한다 

  function f1(){
  	return this;
  }

  //브라우저
  f1() === window;  // true

  //Node.js
  f1() === global; // true

 

객체의 메서드로서

함수를 어떤 객체의 메서드로 호출하면 this의 값은 그 객체를 사용한다

 

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

 

위의 코드는 o를 정의할 때 f 함수를 내부에 정의하였는데 이를 보다 간단하게 함수를 먼저 정의하고 나중에 o.f를 추가할 수 있다

 

  var o = {prop:37};
  
  function independent() {
  	return this.prop;
  }
  
  o.f = independent
  
  console.log(o.f());   // logs 37

 

 

이는 함수가 o 의 멤버 f로부터 호출된 것만이 중요하다는 것을 보여준다 

 

 

DOM 이벤트 처리기로서함수를 이벤트 처리기로 사용하면 this는 이벤트를 발사한 요소로 설정한다( 일부 브라우저는 표준 이벤트 모델이 아닌 다른 방법으로 추가한 처리기에 대해선 이 규칙을 따르지 않는다 )

 

  // 처리기로 호출하면 관련 객체를 파랗게 만듦
  function bluify(e) {
    // 언제나 true
    console.log(this === e.currentTarget);
    // currentTarget과 target이 같은 객체면 true
    console.log(this === e.target);
    this.style.backgroundColor = '#A5D9F3';
  }

  // 문서 내 모든 요소의 목록
  var elements = document.getElementsByTagName('*');

  // 어떤 요소를 클릭하면 파랗게 변하도록
  // bluify를 클릭 처리기로 등록
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', bluify, false);
  }

 

인라인 이벤트 핸들러에서

 

코드를 인라인 이벤트 처리기로 사용하면 this는 처리기를 배치한 DOM 요소로 설정된다

 

  <button onclick = "alert(this.tagName.toLowerCae());">
    this 표시
  </button>

 

위의 경우 경고창에 button 자체를 보여준다 

 

  <button onclick = "alert((function() { return this; })());">
    내부 this 표시
  </button>

 

위의 경우는 렉시컬 스코프를 생각해보면 된다

this가 어디에 위치해 있느냐에 따라 다른 객체를 호출한다는 것을 알고 있을 것인데 위의 코드에서 this는 onclick이라는 이벤트가 실행될 때  alert라는 함수가 실행되게끔 설계했다. alert 함수 내부에는 익명함수가 내부함수로 위치하고 있고 this가 return되고 있음을 확인할 수 있다

여기서의 this는 이벤트가 아닌 익명함수가 스코프가 되기 때문에 태그 자기 자신을 반환하는 게 아니라, window객체를 반환한다

 

 

 

---

https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN