JavaScript - this (this가 쓰이는 세가지 경우)

JavaScript에서 this는 쓰이는 상황에 따라서 의미가 달라진다.

 

오늘은 this가 쓰이는 세가지 상황을 정리해볼까 한다.

물론 더 있을텐데, 나는 크게 세가지경우로 나뉜다.

 

세가지 상황을 보기전에, 그냥 this라 하면 뭐가 나오는지 보고 시작하는게 좋을 것 같다.

 

console.log(this)

결과

 

this는 기본적으로 Window다.

Window가 아닌 경우의 this 세가지를 ARABOJA.

 

1. 객체를 가르키는 this

 

function Car (name, maxSpeed) {
  this.name = name
  this.maxSpeed = maxSpeed
  this.whoIsThis = function () {
    console.log(this)
    console.log(this.name)
  }
}

var myCar = new Car('BMW', 2000)
myCar.whoIsThis()

 

결과

생성자, 혹은 객체에서 호출되는 this는 객체 자신을 의미한다. 객체의 name과 매개변수로 받은 name이 구분되는 것 도 this덕분이다.

 

그런데, 아래처럼 하면 결과가 달라진다.

 

function Car (name, maxSpeed) {
  this.name = name;
  this.maxSpeed = maxSpeed;
  this.whoIsThis = function () {
    console.log(this)
    console.log(this.name)
  };
}

var myCar = new Car('BMW', 2000)
myCar.whoIsThis()

var iGotFunction = myCar.whoIsThis

iGotFunction()

 

결과

this가 객체를 가르킬 때는 호출되는 함수가 객체의 멤버인지가 중요하다.

iGotFunction은 멤버인 함수를 빼온 것이라 더이상 iGotFunction이 담은 함수는 객체의 멤버가 아니다. 그래서 Window가 나온 것이다.

 

2. 이벤트리스너 등 DOM 객체에 접근한 함수내의 this

 

function clicked () {
  console.log(this)
}

clicked()

document.querySelector('.box').addEventListener('click', clicked)

 

clicked 함수를 일단 부르고, 클릭 되었을 경우 부르도록 했다.

 

결과

 

 

그냥 호출 했을 때는 Window를 반환하고, eventListner처럼 DOM객체를 거쳐서 호출 된 경우 DOM객체를 반환한다.

 

 

3. 엄격 모드(use strict)의 this

사실 여기쯤 부터는 초보인 내가 정리해도 될까 싶다. 무섭다..

 

function strict () {
  "use strict"
  return this
}

function notStrict () {
  return this
}

console.log(strict())
console.log(notStrict())

 

use strict가 들어간 것 빼고는 똑같은 함수가 this를 return 한다.

지금까지 살펴본 내용에 따르면 Window를 반환해야 한다.

 

결과

 

엄격모드에 들어가면 this는 실행 문맥으로만 사용되어야 한다는 규칙이 있는 것 같다. (추측)

그래서 this가 정의되지 못한 상황에서 this는 undefined가 된다.

 

'실행 문맥으로만 사용되어야 한다는게 뭔 X소리야??'

아래 소스를 보자.

function strict () {
  "use strict"
  console.log(this)
}

strict()

document.querySelector('.box').addEventListener('click', strict)

 

처음에 그냥 호출 할 때는 당연히 undefined가 나올 것이다.

그러나 eventListener를 통해 호출 되었을 때는 어떨까?

 

결과

DOM 이벤트로 호출 되었을 때는 DOM객체를 반환한다.

 

그러니까 야매로(???) 설명하면 '실행 문맥상 this가 Window가 아닌 명확한 target이 있는 경우에 this값을 정확히 지정해준다.'

 

라는 의미로 이런 결과가 나오는 것 같다. 사실 엄격모드는 이 글에서 다루기 너무 길고 나도 아직 정확히 파악하지 못했으니... 엄격모드에서의 this에 대한 정확한 설명은 MDN 문서를 참고하자.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this