this 에 대해서

this 는 상황에 따라서 의미가 바뀐다. 

 

1.  그냥 쓰거나 일반 함수 안에서 쓴다면

window 라는 의미로 쓰인다. 

그런데 만약 엄격모드, 즉 use strict 모드에서 일반함수 내에 this를  사용하면 this는 undefined 이 된다. 

 

--- window 란? ---

window 란 자바스크립트 기본 함수들을 가지고 있는 object 이다.

자바스크립트 에서는 { window} 라는 기본 오브젝트가 있고, 그 안에 함수나 변수를 보관한다. 

이거를 global object 라고 한다. (전역변수 보관소)

또한, window는 자바스크립트 기본 함수모음. HTML DOM 이라는 것도 맞는말이다. 

그래서 함수() 이렇게 호출하는 것과, window.함수() 이렇게 호출하는 것이 같다. 

 

 

 

2. 오브젝트 내의 함수(즉, 메소드) 안에서 this 를 쓰면

그 함수를 가지고 있는 오브젝트를 뜻한다. 

쉽게 말하면, 메소드의 주인님을 말함. 

주의할 점은 최상위 오브젝트 라고 인식하지 말것. 

 

let 오브젝트 ={

    data : {

         함수 : function (){

             console.log(this)

         }

    }

}

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

 

여기서 this 값은         {함수 : f}

 

그렇다면 일반 함수가 아닌 화살표 함수에서는 어떨까?

 

let 오브젝트 ={              

    data : {

         함수 : () => {

             console.log(this)

         }

    }

}

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

 

화살표 안에서 this는 부모요소  혹은 상위요소 에 있는 this 값을 물려받아 사용한다.

한마디로  화살표 함수 내부에서 this는 this 값을 재설정 하지 않는다는 말.  

추가로

data: {함수 (){console.log(this)}} 이것도

data의 value 값에 새로운 object안에 함수 라는 key의  value를 설정하는 것이다.

 

 

 

근데 이렇게 따지면 일반함수 에서 쓰인 this 와,  오브젝트 내의 함수 즉 메소드 안에서 쓰인 this는 개념이 같다. 

그 함수를 가지고 있는 오브젝트를 뜻하기 때문.

 

3. 오브젝트 생성기계( constructor) 안에서 쓰면

this 는 새로 생성되는 오브젝트(즉, instance)를 말한다. 

우리는 비슷한 오브젝트들을 많이 만들어야 할 때에 함수를 이용해서 오브젝트 생성 기계를 만들 수 있다. 

constructor 에 대해서는 추후 다시 정리. 

let ob = {};

     function 기계() {

     this.name = 'kim'

}

let 오브잭트 = new 기계(); // 결과는 기계{name: 'kim'}

여기서 this는 이 기계로부터 새로 생성되는 오브젝트(instance 라고 함 )를 뜻함

new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있고,

새로 생성된 오브젝트(instance)는 {이름 : 'Kim'} 이라는 값을 가지고 있다. (this 라는 키워드 덕분에)

 

4. 이벤트 리스너 안에서 this를 사용하게 되면,

 

e.currentTarget의  의미로 사용된다. 

이게 뭐냐면, 지금 이벤트가 동작하고 있는 곳 의미.

 

여기서 잠깐! 

e.currentTarget 과 e.target  의 차이는?

e.target : 내가 클릭한 요소. 이벤트가 위임되어 발생하는 자식의 요소를 반환한다. 

e.currentTarget : 이벤트가 부착된 부모의 위치를 반환한다. 

 

 

유의할 점. 

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

      let array = [1, 2, 3];

      array.forEach(function (a) {

          console.log(this) //출력값은 window 가 array.length 만큼 나옴.

      })

 })

 

이런 상황에서 this 값은 무엇을 가리킬까?

this 값은 분명 이벤트 리스너 안의 콜백함수에 있지만, 

그 안에 forEach 문의 콜백함수 내부에서 호출되고 있다. 

 

이런 경우 this는 일반함수 내부에서 호출된 것으로 보고 있다. 

 

let obj = {

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

     함수: function () {

          console.log(this);  //결과값은 {이름들 : Array(3), 함수: f} 이렇게 나온다. 이유는 obj 안에 메소드 에서 실행된 this니까.

          obj.이름들.forEach(function () {

               console.log(this); //결과값은 window가 이름들.length 만큼 나온다.

//이유는 근본없는 일반함수, 즉 전역함수 이기 때문이다. 자바스크립트 기본 window 에 내장된 함수 이니까.

//this 값을 판단할 때 가장 가까이 있는 함수를 보면 되는데, 여기서는 forEach의 콜백함수 로 쓰였기 때문에 일반함수임.

//그런데 여기서 만약 forEach문 내부 콜백함수를 화살표 함수로 사용해서 console.log(this) 를 한다면,

//화살표 함수 특성상 상위 this의 의미를 물려받아 사용하기 때문에 {이름들 : Array(3), 함수: f} 이렇게 나온다.

          })

     }

}

obj.함수()