This

JS에서 this는 왜 어려울까?
다른 언어들에서 this는 만들어진 객체 자기 자신을 뜻하지만, JS에선 다르다!
JS에서 this는 요술램프 지니다!! 누가 호출했냐에 따라 누구의 지니인지 동적으로 달라진다.

This

1. 브라우저 전역스코프에서 console.log(this)

result : window 객체를 가리킴

reason : 브라우저 전역 객체가 window이기 때문에

---

2. function(){} 내부에서 this 호출 

result : window 객체가 나옴

reason : '함수'는 선언 시 window 객체에 '등록'됨. 이 함수는 class에 속한 것도 아니고, 전역 스코프에서 호출되었기 때문에 this가 속한 곳은 window 객체임. 따라서, window.simpleFun()로도 호출가능!

 

---

3. Class {} 내부에서 method(){this 호출} 생성 

• const counter = new Counter() //인스턴스 생성!
• '전역스코프'에서 counter.increase() //인스턴스.메서드 호출!!

result : this는 인스턴스 counter을 가리킴

사진 상으로, class Counter가 console에 찍혀서 클래스를 가리키는 것처럼 보이지만, 이 this는 instance counter이다

• reason: 인스턴스 counter에 새로운 method를 추가 후, counter.increase() 호출해보면 새로운 메서드까지 추가된 인스턴스 counter가 console에 찍힙니다.

🚫 이 때, 인스턴스를 생성하지 않고 바로 변수에 메서드를 할당하면?!

const caller = counter.increase;
caller() //undefined 리턴됨​

const / let으로 선언되면 window 객체에 등록 조차 안된다. (예외. var은 가능해짐..그래서 var은 비추비추👎)
function(){console.log(this)}를 담은 caller를 caller()로 호출해봤자, caller은 속한 곳도 없고, window에 등록도 안되었기 때문에 this가 가리키는게 없고, undefined로 떠버림.

---

4. this가 누가 호출하냐에 따라 다른 주인의 지니라는걸 보고싶늬?

새로운 class를 생성후, 인스턴스를 만들고나서 다른 class에서 생성했던 method를 할당 후 호출해보면

this가 가리키는 대상이 Counter이 아닌 Bob으로 바뀌어있다!!

---

이처럼, JS는 함수를 다른곳으로 할당하는 순간 this라는 정보를 잃어버릴 수 있기 때문에
object와 함수의 관계를 this를 꽁꽁 묶어주려면?! bind를 이용해야 합니다.

1. bind 이용

class Counter {
    count = 0;
    increase = function () {
        console.log(this);
    };
}

const counter = new Counter();
counter.increase();

// const caller= counter.increase; 대신에!!
const caller = counter.increase.bind(counter); //bind이용!!
caller();

2. 화살표 함수 이용

class Counter {
    count = 0;
    increase = () => { //화살표 함수 이용하면 bind대신 이용 가능
        console.log(this);
    };
}

const counter = new Counter();
counter.increase();

const caller = counter.increase;
// const caller = counter.increase.bind(counter);
caller();