this?

1.일반함수에서의 this
2.Object내 함수안에서 쓰면(method)
3. Constructor에서의 this
4. addEventListener의 콜백 함수에서의 this
5. 번외) Case Study를 해봅시다.

constructor안에서 쓰면 ...

constructor로 새로생성되는 Object를 뜻한다.

function constructor(){ 
 this.name = "kim"
}

var Obj = new constructor();
console.log(Obj)//  { name : 'Kim'} 이라는 Object가 "뿅"생성이 된다.

addEventListener의 callBackFunc에서 쓰면...

document.createElement("btn").addEventListener("click", function(e){
           this;
           e.currentTarget
           console.log(`this : ${this}`, `e.currentTarget : ${e.currentTarget}`)
       })


console.log(this===e.currentTarget)// true

이벤트가 걸려있는 요소가 바로 this이다.

---

특수한 경우

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

 document.getElementById("case1").addEventListener("click", function(e){
   
        	var arr = [1,2,3];
   			// callback함수인 forEach문의 this는??
            arr.forEach(function(a){
                console.log(this)
            })
        })

1-A. {window} 객체를 뜻합니다.

Why ??
forEach 콜백 함수는 Array.prototype.forEach()이다.
Array라는 객체를 우리가 생성 할 때

var arr = new Array() 이런 식으로 생성 할 수 있는데 

이 방법은 constructor문법으로 Object를 생성할 때 같지 않은가??
무언가의 함수내에서 Array라는 Object(|| 배열)을 생성해 내는데 그것이
window객체에서 생성해 낸 것이다.
따라서 Array에서 쓸수 있는 메서드 들은 window라는 객체 함수에서 나오는 것이기에 ~~내생각 아마도...~ this값은 window객체를 나타낸 것 같다..

1-1 Q. arrow function 으로 바꾸면?

 document.getElementById("case1-1").addEventListener("click", function(e){
   
            var arr = [1,2,3];
   			// arrow function으로 바꿈
            arr.forEach(()=>{
                console.log(this)
            })
        })

1-1 A. this는 e.currentTarget이다.

Why ??
화살표 함수는 새로 this를 재정의 하지 않고 화살표함수를 감싸고 있는
바로 '위'의 this의 값을 물려 받는다.
화살표 함수 모형만 봐도 빵꾸 뽕이라서 먼가 당연한거 같다...

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

 var 오브젝트 = {
   
   이름들 : ['김', '이', '박'],
   함수 : function(){

     오브젝트.이름들.forEach(function(){
       console.log(this)// 여기서의 this는?
     })
   }
 }
 오브젝트.함수()

2 A. {window} 객체를 뜻합니다.

forEach를 호출하는 주인장이 누구인지 생각해보자

3 Q. forEach의 함수를 Arrow function으로 바꾸면...?

var 오브젝트 = {
  이름들 : ['김', '이', '박'],
  함수 : function(){
    // forEach의 콜백함수를 화살표로 바꿈
    오브젝트.이름들.forEach(()=>{
      console.log(this)// 여기서의 this는?
    })
  }
}

오브젝트.함수()

3 A. Object이다.

arrow function의 특징 :

 내부의 this 값을 변화시키지 않음
 
 => 외부 this 값 그대로 재사용가능