[코딩애플;JS ES6]this.

this는 Jquery든 자바스크립트든 평소에 주로 사용하는 것이긴 한데,

느낌적인 느낌만 있고 정확히 알 수가 없었다.

이번 기회에 잘 설명을 들어보고 이해해보자!

 

this는 사용하는 환경에 따라서 각각 다른 뜻을 가진다.

 

1.함수와 object(객체)에서 사용할 때.

 

1-1.그냥 script태그 안에서 사용하면 this는 윈도우 값이다.

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

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

 

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

IE 10버전 이상에서는 'use strict'라고 스크립트 페이지 맨 상단에 적으면 strict mode가 됨.

->var 없이 변수 선언하거나 변수 이름을 이상하게 선언하는 실수를 방지해줌.

 

2.객체 자료형(object)안에서 사용하면 this 메소드를 가지고 있는 오브젝트이다.

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

*construct는 오브젝트를 복사해서 생성해주는 기계 같은 것.

    function 기계(){

         this.이름 ='kim';

        }

 

요런식으루! 여기서 this는 기계로부터 생성될 오브젝트! 이름이라는 키와 kim이라는 값을 가지는 오브젝트가 생성된다.

그러면 이 기계로부터 새로운 오브젝트를 new키워드를 통해 뽑아낼 수 있다.

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

 

 

4.이벤트 리스터 안에서 쓰면 this는 e.currentTarget의 의미.

즉, 지금 이벤트가 동작하는 곳!

 

**this는  function을 만날 때마다 의미가 변경될 수 있다.

1)이벤트 리스터 안에서 콜백함수를 쓰면??

 document.getElementById('버튼').addEventListener('click',function(e){

    var 어레이 = [1,2,3];

    어레이.forEach(function(){

        console.log(this)

    });

 });

 

이벤트 리스터 안의 function을 하나 더 만났기 때문에 일반함수안에 this는 window가 출력됨.

어떤 함수안에 있는지 확인을 해야함!!

 var 오브젝트 ={

    이름들 : ['김','이','박'];

    함수 : function(){

        오브젝트.이름들.forEach(function(){

            console.log(this)

        })

    }

 }

 

이런 경우도 마찬가지. window가 출력됨.

 

이렇게 function을 만날 때마다 바뀔 수 있어서 내가 원하는 this를 쓰기 힘들다면

arrow function으로 변경해보자.

 var 오브젝트 ={

    이름들 : ['김','이','박'];

    함수 : function(){

        오브젝트.이름들.forEach(()=>{

            console.log(this)

        })

    }

 }

 

이런 식으로 사용하면 내부의 this값을 새로 변경하지 않기 때문에 유용하다.