this

• 자바스크립트에 this는 다른 언어랑 this랑 다르다.
• 기본적으로 자바스크립트에서 this는 윈도우다!!!
• "use strict"모드에서는 this는 "undefiend" 이다
• 함수에서도 this는 윈도우다

this가 바뀌는 경우

• 객체에서 this을 호출 할경우

const obj = {
	name: "spearJin",
    sayName() {
		console.log(this);
	}
}
obj.sayName(); //{ name: "spearjin", sayName: f() }

const obj2 = obj.sayName;
obj2(); // undefiend

* this는 함수를 호출 할때 정해진다
* obj.sayName()은 sayName()이 객체에서 호출된거고
* obj2()는 윈도우에서 호출 된거다

• this는 함수가 호출될때 결정 된다고 생각하자
• new을 통해 객체를 만들면 this는 자기 자신이 된다

bind, call, apply

function sayName() {
	console.log(this.name);
}

sayName.bind({ name: "spearJin" })(); // 새로운 함수를 만듬
sayName.apply({ name: "spearJin" }); // 새로운 함수를 만들고 호출도 해줌
sayName.call({ name: "spearJin" }); // 함수를 호출한다
// spearJin 결과가 나온다

화살표 함수

• 화살표 함수의 this는 부모 스코프를 가르킨다
• this는 함수를 호출할때 판단 하고 잘 생각해보자!

const obj = {
	name: "spearJin",
    sayName() {
		console.log(this.name);
        function inner() {
        	console.log(this.name);
        }
        inner();
	}
}
obj.sayName();

* 결과: separJin, undefined

const obj = {
	name: "spearJin",
    sayName() {
		console.log(this.name);
        const inner = () => {
        	console.log(this.name);
        }
        inner();
	}
}
obj.sayName();

* 결과: separJin, spearJin

콜스택으로 분석 해보자

1. 첫번째 경우

const obj = {
	name: "spearJin",
    sayName() {
		console.log(this.name);
        const inner = () => {
        	console.log(this.name);
        }
        inner();
	}
}
obj.sayName();

• anonymouse의 this는 우선 window이다 => this = window
• 객체에서 sayName을 호출 햇으므로 this는 객체를 가르킨다 => this = obj
• inner함수는 화살표 함수이므로 부모의 this을 가르킨다 => this = obj

2. 두번째 경우

const obj = {
	name: "spearJin",
    sayName() {
		console.log(this.name);
        inner() {
        	console.log(this.name);
        }
        inner();
	}
}
obj.sayName();

• anonymouse의 this는 우선 window이다 => this = window
• 객체에서 sayName을 호출 햇으므로 this는 객체를 가르킨다 => this = obj
• inner함수는 그냥 함수이므로 호출을 하면 window을 가르킨다 => this = window

결론

• this는 기본적으로 window다
• 객체에서 함수를 호출하면 this는 객체이다
• 화살표 함수는 부모 this를 가르킨다
• bind, apply, call로 this을 지정할 수 있다
• 가장 중요한건 this는 함수가 호출될때 결정 되는것이다