this함수

 

후웁

 

 

 

console.log(this);

찍으면 콘솔창에 window 머시기 뜸

 

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

이것도 마찬가지로 window 머시기 뜸

 

window 머시기 ==> 그냥 자바스크립트를 통째로 감싸는 녀석이라고 생각하면 됨

 

---

let object1 = {
  data : 'Kim',
  lion : function(){ console.log('front') } 
}

오브젝트 내에 함수 사용가능 

오브젝트 내에 함수를 method라고 함 

 

 

object1.lion();  //함수는 () 해줘야 출력됨

-> 콘솔에 front가 찍힌다

 

 

let object1 = {
  data : 'Kim',
  lion : function(){ console.log(this) } 
}

object1.lion();

-->

this 콘솔

 

이런 결과가 나온다.

 

즉, method안에서 this를 쓰면 this는 메소드를 가지고 있는 오브젝트(this를 품고있는 오브젝트)를 뜻함

 

let object2 = {
  data : {
    lion : function(){ console.log(this) }
  }
}
object2.data.lion();

오브젝트안에 오브젝트의 this는 어떻게 찍힐까?

 

예상대로

 딱 전단계의 lion만 찍힌다. ㅇㅇ 

 

 

---

this를 constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻한다.

      function 기계() {
        this.이름 = "park";
      }

      let object = new 기계();

 

여기서의 this는기계로부터 새로 생성될 object들을 의미한다.

 

new라는 키워드를 사용하면 this덕분에 새로운 오브젝트를 생성할수있다.

새로운 오브젝트는 {이름: "park"}이라는 값을 가짐.

 

---

 

this를 eventlistener 안에서 쓰면 지금 이벤트가 동작하는 곳을 찝어낸다.

 

document.querySelector('버튼').addEventListener('click', function(e){
  console.log(this)  // e는 파라미터/ 지금 이벤트가 동작하는곳
});

 

---

this를 eventlistener 안에서 콜백함수를 쓰면?

document.querySelector(".button").addEventListener("click", function (e) {  
		let arr = [1, 2, 3];
        arr.forEach(function (a) {
        //function(a)는 콜백 함수 , 그냥 함수안에 들어가는 함수를 콜백함수라고 부름
        console.log(a); //a = 어레이 안에 있던 하나하나의 데이터들 , 내부코드가 3번 반복됨
        });
      });

 

함수안에 들어가는 함수를 콜백함수라고 부름

 

그냥 window가 출력됨.

이유: 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문

 

 

 

 

 

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

      let oobject = {
        names: ["김", "이", "박"],
        fx: function () {
          oobject.이름들.foreach(function () {
            console.log(this);
          });
        }
      };

 

foreach 안의 함수에 this가 들어감.

근데 이 함수가 뭐 특별한건없이 일반함수이기 때문에 똑같이 window가 출력됨.