[Javascript]this에 대해 알아보자

오늘 알아볼 자바스크립트 개념은 this이다.

일반적으로 this를 사용할 때는 인스턴스를 일반적으로 생각하지만 자바스크립트의 경우 상황에 따라 this가 달라지기 때문에 제대로 원리를 이해하지 못하면 생각대로 코드가 작동하지 않는 경우가 발생한다.

최근에 코드를 작성 했을 때 this가 계속 undefined로 동작했던 경험이 있어 왜 동작이 안되냐고 화를 낸적이 기억이 난다.

상황에 따라 달라지는 this에 대해 공부해보도록 한다.

상황에 따라 달라지는 this

최근 코어자바스크립트의 책을 읽으면서 this는 상황에 따라 달라짐을 알 수 있었다.

정확히 언제 달라지느냐를 설명하자면 실행컨택스트에의해 this가 변하게 되는데 실행컨택스트의 경우 함수를 호출 할 때 결정된다.

즉, 함수를 어떻게 호출하는지에 따라 this가 달라짐을 알 수 있다.

일반적인 this

간단하게 설명하면, 일반적으로 this는 window이다.(nodejs 에서는 global이다)

하지만 상황에 따라 this가 가르키는 것이 다르다고 설명했음으로 일반적인 this가 언제인지 알아보도록 하자.

1. 전역공간에서 호출할 경우
2. 함수를 호출 할 경우

전역공간에서 this

• console.log(this)를 하게 되면 window에 대한 정보가 나오는 것을 확인 할 수 있다.
• window는 자바스크립트의 전역 객체이고 선언하게 되는 정보들은 window에 저장 됨을 알 수 있다.
  • this는 자신을 호출한 객체를 의미함을 알 수 있다.

함수를 호출할 경우

• 함수를 전역공간에서 호출 했음으로 this는 window가 된다.

결론

함수를 어떤 객체에서 호출 했는지가 중요하다.

전역객체에 의해서서 호출 할 경우 window(node js에서는 global)를 의미한다.

메소드를 호출 할 때의 this

여기서 말하는 메소드는 객체안에서 선언한 함수(?)를 의미한다.

전역객체 안에서의 함수를 실행할 때에는 window가 나왔음으로 객체 안에서 호출한 메소드의 경우에는 해당 객체가 this가 될 것임을 알 수 있다.

다음과 같이 this가 inner를 메소드로 갖고있는 객체를 반환함을 알 수 있다.

결론

this가 어느 객체에 의해서 호출 되었는지에따라 결정 됨을 알 수 있다.

헷갈리지 말아야 할것중에 어느객체에 의해 호출 되었는지에 따라 결정 되는 것이지 객체안에서 호출 된다고 해서 this가 바뀌지는 않는다.

const a = {
    inner: function() {
        const func = function() {
            console.log(this);
        }
        func(); // window 반환, 실행 시점에서 호출한 객체가 없음으로 window가 된다.
    }
}

생성자 this

생성자 함수를 이용하여 인스턴스를 생성하게 되면 this는 인스턴스 그 자체가 된다.

(오타 죄송합니다.)

arrow functuion this (lexical this)

es6 문법 이후로 arrow function 문법이 새롭게 생성 되었다.

arrow function의 특징으로는 코드를 간결하게 보여준다는 특징이 있지만 내부적으로는 해당 기능만 있는 것이아니다.

arrow function의 경우에는 this가 존재하지 않는다.그래서 arrow function에서 this를 선언하게 되면 항상 상위 스코프를 가리키게 된다.

기존의 함수를 어떻게 호출하냐에 따라 this의 값이 변한것을 알아 보았는데 arrow function에서는 항상 상위스코프만을 가르키기 때문에 lexical(정적인) this로 표현이 된다.

그렇기 때문에 항상 모든 상황에서 arrow function을 사용하면 안된다. this의 값에 영향을 줄 수 있는 예외적인 경우에 대해서는 일반적인 함수를 선언해야한다.

오늘 알아볼 자바스크립트 개념은 this이다.

일반적으로 this를 사용할 때는 인스턴스를 일반적으로 생각하지만 자바스크립트의 경우 상황에 따라 this가 달라지기 때문에 제대로 원리를 이해하지 못하면 생각대로 코드가 작동하지 않는 경우가 발생한다.

최근에 코드를 작성 했을 때 this가 계속 undefined로 동작했던 경험이 있어 왜 동작이 안되냐고 화를 낸적이 기억이 난다.

상황에 따라 달라지는 this에 대해 공부해보도록 한다.

 

출처:

코어자바스크립트

https://poiemaweb.com/es6-arrow-function