자바스크립트 this (1)

자바스크립트의 this의 뜻은 매우 다양하다. 사용하는 환경에 따라서 4개 이상의 각각 다른뜻을 가지고 있다.

 

 

 

this의 1번째 뜻 1-1. 그냥 쓰거나 일반 함수 안에서 쓰면 this는 window

html 파일 아무거나 만들고 중간에 <script> 태그 열어서 this라는 키워드를 콘솔창에 출력해보자.

 console.log(this) // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

그러면 this 키워드는 그냥 window {~~~} 이런 값이 나온다.

 

비슷하게 일반 함수 내에서 this라는 값을 출력해보면

function 함수() {
  console.log(this);
}

함수() // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

똑같이 this라는 값은 window라고 출력된다. 이것이 this의 첫번째 뜻이다. 

 

 

 

window란?

window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다.

쉽게 말하면 우리가 쓰는 자바스크립트 기본 함수들

document.getElementById(), alert(), console.log() 이런 함수들을 보관하는 보관함이다.

보관함은 특별한건 아니고 그냥 큰 {객체}일 뿐이다.

 

또한 우리가 전역변수를 만들었을 때도 이 값을 보관해준다.

<script>
  var x = 9999;
</script>

이렇게 변수를 큰 공간에 만들면 x라는 변수는 window라는 큰 객체안에 자동적으로 생성된다. 함수도 마찬가지이다.

전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수이다.

 

 

 

1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined

<script>
  'use strict';

  function 함수(){
    console.log(this)
  }
  
  함수(); // undefined
</script>

'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트를 작성가능하다.

strict mode에서는 var 키워드 없이 변수를 선언하거나, 변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해준다.

strict mode에서는 this 키워드를 일반함수 안에서 불렀을 때 undefined로 강제로 지정해준다.

 

 

 

this의 2번째 뜻. object  메소드 안에서  this는 메소드를 가지고 있는 object를 뜻함

let obj = {
  data: 'kang',
  함수: function () {
    console.log(this); 
  },
  함수2() { // : function 생략 가능!
    console.log(this);
  },
};

obj.함수(); // {data: 'kang', 함수: ƒ, 함수2: ƒ}
obj.함수2(); // {data: 'kang', 함수: ƒ, 함수2: ƒ}

메소드 안에서 this를 쓰면 this는 메소드를 가지고 있는 객체를 뜻한다.

메소드란? 
- 객체 안에 있는 함수를 메소드라고 부른다.

 

let obj2 = {
  data: {
    함수: function () {
      console.log(this); 
    },
  },
};

obj2.data.함수(); // {함수: ƒ}

함수라는 이름을 가진 메소드에서의 this는 메소드를 가지고 있는 객체 즉, obj2.data를 가르킨다.

 

 

 

사실 1번뜻과 2번뜻은 같은 뜻이다. 왜냐하면 2번 뜻을 잘 배웠다면 1번도 자연스레 유추가 가능하다.

우리가 함수나 변수를 <script> 태그 안에 만들었을 때, 함수나 변수는 그냥 만들어지는게 아니다.

<script>
  function hello(){
    console.log('hello');
  }
</script>

위에서 만든 hello 함수는 전역변수나 전역함수를 관리하기 위한 보관소 window라는 객체에 자동으로 추가가 된다.

 

 

<script>

  (1)
  function hello(){
    console.log('hello')
  }

  (2)
  window.hello = function(){ console.log('hello') };
  
</script>

그래서 위 (1),(2) 코드 둘 다 자바스크립트 입장에서 보면 똑같다. 결론은 전역함수 만들거나 전역변수를 만들면 저렇게 window {오브젝트} 안에 담긴다. 우리가 일부러 하지 않아도 변수나 함수 쌩으로 만들면 자바스크립트가 자동으로 알아서 window안에 담는다.

 

 

그럼 이제 다시 한번 보자.

<script>
  function hello(){
    console.log(this) // Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  }
</script>

 

hello 함수는 전역함수이므로 window 객체에 담긴다. 즉 hello 함수는 window 객체의 메소드이다.

그러므로 2번뜻에 의하여 메소드 안에서의 this는 메소드를 가지고 있는 객체를 가르킨다. 

즉, 위에서의 this는 window 객체를 가르킨다.

 

 

🌈 정리

- this의 뜻은 사용하는 환경에 따라서 달라진다.

- 전역변수나 전역함수를 만들면 window라는 객체에 보관된다.

- 객체의 메소드안에서의 this는 메소드를 가지고 있는 객체를 가르킨다.