JS - this

자바스크립트 예약어 중 하나로 "this"는 현재 실행 중인 함수나 메소드 내에서 참조하는 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수입니다. JS엔진에 의해 암묵적으로 생성되어 코드 어디서든지 참조가 가능하며, 객체의 메소드 내부 혹은 생성자 함수 내부에서만 의미가 있습니다.

자기참조변수? 그게 뭔데...

바인딩

내 연락처에 있는 "엄마"와 지금 글을 보고 있는 여러분 연락처에 있는 "엄마" 는 같은 엄마가 아니잖아요.. 이렇듯 자바스크립트에서 모든 함수는 this를 가지고 있고 함수가 호출되면 그때 그때 this가 가르키는 객체가 결정되는데 이렇게 함수 실행 시 this가 (유)동적으로 결정되는 것을 this가 해당 객체에 바인딩 된다라고 표현합니다.

바인딩 규칙

1. 기본 바인딩: 함수 단독실행 => this는 기본적으로 전역객체에 바인딩 됨

function basicBinding() {
	console.log(this);
}
//주의
function basicStrictMode() {
	'use strict' // 엄격모드 키워드 실행
    console.log(this) //바인딩 대상 제외
}
basicBinding() // window
basicStrictMode() // undefined 

2. 암시적 바인딩: 객체에 메소드로 실행 => this는 해당 객체에 바인딩 됨

const obj = {
	name: "yuni",
    getName() {
    	return this.name;
    },
}

obj.getName(); // yuni > 참조타입을 통해 암시적 바인딩

//주의 콜백함수 
function checkObjThis(callback) { // 함수의 참조값만 전달 > 바인딩 대상 제외
	callback(); //함수 단독 실행 > 바인딩 대상 제외
} 

show checkObjThis(obj.getName); // undefined

3. new 바인딩: 새로운 객체 생성, 함수코드 실행, 새로 생성한 객체 반환함(this는 새로운 객체에 바인딩)

{
	obj = {} // 새로운 객체 생성
    this = obj //바인딩
    
    this.name = "yuni" // obj: {name: "yuni"}
    
    return this
}

4. 명시적 바인딩: call(), apply(), bind() => 함수객체는 해당 메소드를 통해 this가 소실 될 수 있는 문제를 해결할 수 있음

call(context, arg1, arg2) // context: this를 바인딩할 객체, arg1,2 : 인수
apply(context, args) // context: this를 바인딩할 객체, args: 배열형태로 전달
bind(context, arg1, arg2) // context: this를 바인딩할 객체, arg1,2 : 인수

바인딩 우선순위

new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

화살표함수

화살표 함수는 this를 바인딩하는 방법이 다릅니다.

const obj = {
	name: "yuni"
    showName(sec) {
    	setTimeout(()=> {
        	console.log(this.name);
        },sec)
    },
};

obj.showName(1000); // 1초뒤 "yuni" 출력

위에 콜백함수에선 this가 함수 단독실행에 엮여 this 바인딩 대상에서 제외된다고 했는데(undefined) 화살표 함수에서는 잘 실행이 되네요?!
이유는 화살표 함수는 상위 실행 문맥을 유지합니다. 화살표 함수 안에서 this는 선언될 당시 상위 실행 문맥(상위 스코프)의 this 바인딩 컴포넌트를 가르킵니다.

참고 사이트
https://accurate-baker-e9f.notion.site/0320_this-1b2d8fe49c69492d90ce7c316ba87cc2
https://www.youtube.com/watch?v=7RiMu2DQrb4