[JS] this 가 가르키는 것

this는 자기 자신을 가르킨다. 

 

클래스에서 this

함수형 클래스에 this로 속성을 하나 생성하고

프로토타입으로 메소드를 정의하여 this.property1을 띄우도록 한다.

여기서 this는 자기자신, 즉 클래스인 MyClass를 가르키게 된다.

MyClass의 인스턴스인 my의 method를 호출했을 때 어떤 값이 나오는지 확인한다.

클래스 내에서의 this는 클래스 자신을 가르킴을 알 수 있다.

 

함수에서 this

이번엔 함수에서 this를 사용해본다.

전역변수 data에 10을 넣고

중첩함수 inner에 this를 사용해 data를 20으로 생성하고

전역변수 data에 30을 넣어준다.

1번의 data는 30이 나왔다. 함수내에서 같은 이름의 변수를 불렀고 지역변수 var data가 존재하므로 30의 값이 나온다.

2번의 this의 data는 20이 나왔다.

   만약 this가 함수내에 속한다면 분명 지역변수의 30값이 나올텐데 여기서 알 수 있듯이

   함수의 this는 함수에 속하지 않는다.

3번의 window.data, 즉 전역변수는 20으로 나왔다. 처음 전역변수에 10의 값을 넣었는데 20이 나온 것으로 보아

  함수의 this는 window, 전역을 가르키는 것을 알 수 있다.

 

이벤트 리스너에서 this

이번엔 이벤트 리스너에서 this를 사용해본다.

마찬가지로 전역변수, this, 지역변수 data에 다른 값을 넣어본다.

1번 지역변수는 정의한 대로 30의 값이 나온다.

2번 this의 data는 20의 값이 나오는데 지역변수 30이 나중에 정의되었는데도 영향을 받지않고 그대로 20이다.

3번 전역변수도 처음 정의한 10의 값이 그대로이다.

이벤트 리스너에서의 this는 지역변수에도, 전역변수에도 영향받지 않고

오로지 이벤트 객체 그 자체에 속하는 것을 알 수 있다.

 

클래스 내의 함수에서 this

클래스에서 this는 클래스를, 함수에서 this는 전역을 가르키는 것을 알아봤다.

그렇다면 클래스 내에서 생성되고 호출되는 함수에서의 this는 어디를 가르킬지 알아본다.

1번 전역변수는 30으로 그대로 나온다.

2번 this는 20으로 나왔다. 30이 아닌것으로 보아 함수내의 전역변수와는 상관이 없다.

3번 전역변수 또한 20으로 나왔다. 10의 초기값이 변경된 것으로 보아 함수내의 this는 여전히 전역을 가르킨다.

4번 클래스의 this는 초기값인 0이 그대로 나온다.

 

클래스 내라도 함수의 this는 전역을 그대로 가르킨다.

 

클래스를 함수형태로 호출했을 때 this

함수형 클래스란 사실 함수와 클래스의 경계에 서있다. 그 둘을 구분짓는 것은 일단 첫 글자가 대문자인지로 볼 수 있다.

정의된 User은 엄밀히 말하자면 클래스이다.

클래스에서의 this는 클래스를 가르키므로 인자로 전달받은 '클래스'의 값이 들어가는

this.userName의 변경점은 전역변수에 영향을 끼치지 않아야 한다.

전역변수 userName의 값이 클래스로 변경됨을 볼 수 있다.

이는 클래스의 this는 클래스에 속한다는 것에 위배되는데

이유는 클래스 User를 호출했을 때 함수형태로 User('클래스')라고 호출했기에

함수취급을 받아 this는 전역을 가르키게 된 것이다.

 

클래스를 인스턴스를 생성해 호출할 때 this

같은 모양의 함수형 클래스 User를 이번엔 함수형태가 아닌 new를 사용해 인스턴스를 생성해 호출해줬다.

이번엔 전역변수가 변경되지 않고 그대로 나타나며

User클래스 내의 userName에 접근하기 위해서 인스턴스명을 적어주었다.

 

결론

this는 자기자신을 가르키며

이벤트 리스너에서는 이벤트대상객체를,

클래스내에서는 클래스를,

함수내에서는 전역을 가르키지만

클래스가 인스턴스를 생성해 새로운 공간을 할당받을 때에만 그 공간을 가르킨다.