본문 바로가기
Front-end/JavaScript

[JavaScript] this 키워드

늘이 2023. 7. 1. 18:06

 

this는 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있음 

사용하는 환경(위치) this가 의미하는 것
<script> </script> 태그 안 또는 일반 함수 내부 window{} 오브젝트
strict mode의 일반 함수 내부 undefined
 오브젝트 내 함수(메서드) 내부 함수를 동작시키는(메서드를 가진) 오브젝트
생성자(constructor) 내부 생성자를 통해 새로 생성된 오브젝트
이벤트 리스너 내부 e.currentTarget

   

 

1. 그냥 쓰거나 함수 안에서 쓰면 this는 window{} 오브젝트를 뜻함

 

HTML 파일에 <script>태그 열어서 this 키워드를 콘솔창에 출력해보기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
   
</body>

<script>

    console.log(this)

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

    함수()

</script>

</html>

 

 

window {...생략...} 출력 됨 

 

 

 

 

 

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

 

<script>
  'use strict';

  function 간지나는함수(){
    console.log(this)
  }
  간지나는함수();
  
</script>

IE 10버전 이상에서 'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트 작성됨

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

strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해줌

 

 

 

 

2. object 자료형 내 메서드 내 this값은 메서드의 주인인 object를  뜻함 

 

cf)  object 자료형에 함수를 넣을 수 있음
오브젝트에 들어가는 함수들을 메서드(method)라고 함
 
<script>
    console.log(this);

    var 오브젝트 = {
        name : 'sky',
        함수 : function() {
            console.log('hi');
            console.log(this);
        }
    }

    오브젝트.함수();
</script>

 

 

오브젝트의 오브젝트의 함수가 갖는 this

<script>

    var 오브젝트 = {
        name : 'sky',
        data : {
            함수 : function() {
                console.log(this);
            }
        }
    }

    오브젝트.data.함수();
    console.log(오브젝트.data);

  </script>

 

 

 

 

Q. window란?

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

- document.getElementById(), alert(), console.log() 같은 자바스크립트 함수들을 보관하는 보관소. 그냥 큰 {오브젝트}

- 전역변수 보관(x라는 변수가 window라는 큰 오브젝트안에 자동적으로 생성 됨)

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

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

 

-> 전역함수 만들거나 전역변수 만드시면 window {오브젝트} 안에 담김

 

<script>

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

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

 

함수()는 전역변수나 전역함수를 관리하기 위한 window라는 오브젝트에 자동으로 추가됨

그래서 코드(1) 코드(2) 둘다 자바스크립트 입장에서 보면 똑같음

 

 

 

3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트

 

자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우 오브젝트를 복사하는게 아니라 constructor를 만들어서 사용함

<script>
    
    function 기계() {
        this.name = 'sky'
    }

</script>

여기서의 this는 기계로부터 새로 생성될 오브젝트들을 의미

그럼 this.name = 'sky'은 새로생성되는 오브젝트의 name이라는 key값에 'sky'이라는 value를 넣어주세요를 의미

 

기계에서 new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있음

새로운 오브젝트는 {name : 'sky'} 이라는 값을 가짐(this키워드로 인해)

<script>
    
    function 기계() {
        this.name = 'sky'
    }

    var 오브젝트 = new 기계();

    console.log(오브젝트);
  </script>

 

 

 

 

 

4. eventlistener 안에서 쓰면 this는 e.currentTarget

 

document.getElementById('버튼').addEventListener('click', function(e){
  console.log(this)
});

이벤트 리스너에서서 this는 e.currentTarget이라는 뜻과 같은 의미

e.currentTarget은 지금 이벤트가 동작하는 곳, 현재 addEventListener 부착된 HTML 요소를 의미함

 

e.currentTarget, this, document.getElementById('버튼') 출력해보기

<button id="버튼">버튼</button>

  <script>
    document.getElementById('버튼').addEventListener('click', function(e){
        console.log(e.currentTarget)
        console.log(this)
        console.log(document.getElementById('버튼'))
    });
  </script>

 

 

 

 

 

 

 

Q. 이벤트리스너 안에서 콜백함수를 쓴다면 this는? 

 

document.getElementById('버튼').addEventListener('click', function(e){
  var 어레이 = [1,2,3];
  어레이.forEach(function(){
    console.log(this)
  });
});

- 이벤트리스너 안에서 forEach() 라는 반복문을 사용한 코드

- forEach() 반복문을 사용할 땐 안에 function(){} 콜백함수를 넣어서 사용하게 되어있음

* 콜백함수: 그냥 함수 안에 파라미터역할로 들어가는 함수

 

 

eventlistener내부는 맞지만 그 안에서 function을 하나 더 만났기 때문에 의미가 변함

콜백함수는 그냥 일반함수랑 똑같기 때문에 window 출력

 

=> this의 값은 this가 어떤 함수 안에 들어가 있는지 확인하면 알 수 있음

 

 

 

Q. 오브젝트 안에서 콜백함수를 쓴다면 this는? 

<script>
    var 오브젝트 = {
        이름들 : ['김', '이', '박'],
        함수 : function(){
            오브젝트.이름들.forEach(function(){
                console.log(this)
            });
        }
    }

    오브젝트.함수();
  </script>

오브젝트라는 오브젝트 안에 이름들, 함수라는 자료를 각각 저장

함수라는 자료 안에 forEach 반복문

 

 

 

 

5. arrow function의 this

this값은 function을 만날 때마다 바뀔 수 있기 때문에 내가 원하는 this를 쓰기 힘든 경우가 있는데 이 때 arrow function 사용

arrow function 문법: 자바스크립트 ES6 문법 중 function () {} 대신 쓸 수 있는 () => {} 형태의 함수 

arrow function 을 사용하면 함수 내부의 this값을 새로 바꿔주지 않기 때문에 this 사용 시 유용

<script>
    var 오브젝트 = {
        이름들 : ['김', '이', '박'],
        함수 : function(){
            오브젝트.이름들.forEach(() => {
                console.log(this)
            });
        }
    }

    오브젝트.함수();
  </script>

 

 

 

저작자표시 비영리 변경금지

'Front-end > JavaScript' 카테고리의 다른 글

[JavaScript] 템플릿 리터럴(Template literals), 태그드 리터럴(tagged literals)  (0) 2023.07.01
[JavaScript ES6] 변수(variable) var let const 와 Hoisting, 전역변수, 참조  (0) 2023.07.01
[JavaScript] Arrow function 화살표 함수  (0) 2023.07.01
[JavaScript] <script> 위치에 따른 동작 순서  (0) 2023.05.23
[JavaScript] 프로미스(Promise)  (0) 2023.05.23

'Front-end/JavaScript' Related Articles

티스토리툴바