[JavaScript] this

this

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.
• this는 코드 어디서든 참조할 수 있다.
• 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로
  일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.
• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
• 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• 크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.

전역

• 브라우저라는 자바스크립트 런타임의 경우에 this는 항상 window라는 전역 객체를 참조한다.
• 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다. (Node.js에서 전역 객체는 global 이다.)
• 브라우저라는 자바스크립트 런타임에서 모든 변수, 함수는 window라는 객체의 프로퍼티와 메소드이다.

 

함수 안에서

• 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.
• 객체안에 선언된 함수를 전역에 선언된 함수와 구분하기 위해 메소드라고 한다.
• 그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
• 즉, 모든 함수는 객체 내부에 있다.
• 이때 this는 현재 함수를 실행하고 있는 그 객체를 참조한다.
• 정리하면 함수 내부에서 this의 값은 함수를 호출하는 방법에 의해 바뀐다.
• 그리고 또한 엄격모드 여부에 따라 참조 값이 달라진다.
• 엄격 모드에서 일반 함수 내부의 this는 undefinded 가 바인딩 된다.

 

 

 

 

 

일반 함수의 this는 호출 위치에서 정의 ➡️ 다른 곳에 붙여쓸 수 있다. (call 가능)

 

화살표 함수의 this는 자신이 선언된 함수 (렉시컬) 범위에서 정의된다.

 

렉시컬(Lexical) : 함수가 동작할 수 있는 유효한 범위

 

 

일반함수의 경우

 

const user = {
   firstName: 'Haerin',
   lastName: 'Kang',
   age: 16,
   getFullName() {
      return `${firstName} ${lastName}`
   }
}
console.log(user.getFullName()); //Haerin Kang

 

일반함수에서 this는 하나의 객체 데이터가 된다.

화살표 함수에서 위와 같은 방식으로 쓰면 undefined가 나옴

 

화살표 함수의 경우

 

const timer = {
    title: 'Bayern Munich!',
    timeout() {
        console.log(this.title);
        setTimeout(()=> {
            console.log(this.title)
        }, 1000)
    }
}

timer.timeout();



//Bayern Munich!

//(1초 뒤) Bayern Munich!

 

화살표 함수에서 this를 외부 함수에서 참조할 것을 찾는다. ➡️ 자신을 감싸는 함수가 있어야 사용 가능 

 

함수 안에 또 다른 함수를 써 this를 써야할 때는 화살표 함수가 적합!

const timer = {
    title: 'Bayern Munich!',
    timeout() {
        console.log(this.title);
        setTimeout(function () {
            console.log(this.title)
        }, 1000)
    }
}

timer.timeout();

//Bayern Munich!

//undefined

 

undefined가 나오는 이유: 위 코드에서는 setTimeout에서 this를 찾아야하는데, 정확히 어떤 것인지 알 수 없기 때문이다. 더더욱이 setTimeout에서 title이 있다 하더라도 (그럴 일 없지만) 우리가 찾는 값이 아닐 가능성이 매우 높다.