this

this란?

함수가 어떻게 호출되는지에 따라 동적으로 결정되는 녀석(?)이다.

 

this의 목적

작성된 코드를 여러 목적으로 재사용하기 위해 존재

 

this의 특징

• 전역 및 함수 바디에서 사용 가능하다.
• class 안에서 사용하는 this는 생성자 함수에서 사용하는 this와 동일하다.

전역에서의 this

• 브라우저 환경에서 this를 전역에서 사용하면 이 this는 전역 객체인 window객체를 가리킨다.
• 그래서 전역에서 const, let, var 없이 valueA라는 변수를 사용할 경우 window.valueA와 같다.

일반 함수에서의 this

• this를 사용하는 일반 함수를 호출하면 this는 전역 객체인 window객체를 가리킨다.
• 단, 함수 내에서 'use strict'키워드를 사용하면 this는 undefined가 된다.

생성자 함수에서의 this

• this를 사용하는 생성자 함수를 new를 통해 호출하면 this는 해당 생성자 함수의 내부 객체를 가리킨다.
• 생성자 함수를 new로 호출하지 않고 그냥 호출할 경우 this는 전역 객체인 window를 가리킨다.

화살표 함수에서의 this

• this를 사용하는 화살표 함수를 호출하면 this는 부모환경의 this를 가리킨다.

name = "hello"

const a = {
  name : "jyp",
  getName(){
    setTimeout(() => {
      console.log(this.name)
    },1000)
  }
}

console.log(a.getName()) // this는 a 객체를 가리키며 "jyp"를 반환

 

• 그래서 중첩된 함수에서 this를 사용할 경우 부모 객체를 가리킨다.

name = "hello"

const a = {
  name : "jyp",
  getName(){
    setTimeout(() => {
      console.log(this.name)
    },1000)
  }
}

console.log(a.getName()) // this는 a 객체를 가리키며 "jyp"를 반환

메소드 내에서의 this

• 객체내에 정의된 메소드 안에서 this를 사용하고 객체를 통해 메소드를 호출하면 this는 해당 객체를 가리킨다.

const a = { 
  name : "jyp", 
  getName(){ 
    return this.name 
  } 
} 

console.log(a.getName()) // this는 a를 가리키며 "jyp"를 반환

 

• 단, 메소드 안에서 this를 정의했지만 메소드를 다른 변수에 할당하고 그 변수를 통해 메소드를 호출하면 일반적인 함수 호출과 같이 this는 전역 객체를 가리킨다.

name = "hello" 

const a = { 
  name : "jyp", 
  getName(){ 
    return this.name 
  } 
} 

const b = a.getName 

console.log(b()) // this는 window 객체를 가리키며 hello를 반환

 

• 메소드 안에서 중첩 함수가 작성되었을 경우 내부 함수의 this는 전역 객체인 window를 가리킨다.

name = "hello" 

const a = { 
  name : "jyp", 
  getName(){ 
    setTimeout(function(){ 
      console.log(this.name) 
    },1000) 
  } 
} 

console.log(a.getName()) // this는 window 객체를 가리키며 hello를 반환

 

위와 같이 this에 대해 정리해봤는데 정말 JS 너란 놈은 배우면 배울수록 신기한 넘이다...

하지만 이런 JS라서 점점 더 JS에 대해 자세히 알고 싶고 흥미가 생긴다.