this?
- this는 실행 문맥이다(호출자가 누구냐?)
- 자바스크립트의 경우 => 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정
함수의 호출 방법
- 일반함수로 호출
- 멤버함수로 호출
- call() 함수를 이용한 호출
- apply() 함수를 이용한 호출
function say(something){
console.log(something);
}
const obj = {
say:(something) => console.log(something),
}
say("일반함수 : hello");
obj.say("멤버함수 : hello");
say.call(undefined,"call : hello");
say.apply(undefined,["apply : hello"]);
호출 방식에 따른 this.
function say(){
console.log(this);
}
const obj = {
say:function(){ console.log(this) },
bye:() => console.log("멤버함수지만 화살표 : ", this),
}
say(); // 1. window
obj.say(); // 2. obj
obj.bye() // 3. window
say.call(undefined); // 4. window
say.apply(undefined); // 5. window
const objSay = obj.say;
objSay(); // 6. window
1. 일반함수 호출(say) : this로는 window 객체. call에 undefined이 들어간 상태라고 보면 편하다.
- undefined인 경우 글로벌 객체 window가 자동으로 할당.
2. 멤버함수 호출(obj.say) : this로는 obj객체. call에 obj 객체를 넘겨준 상태라고 보면 된다.
3. 멤버함수지만, 화살표 함수인 경우(obj.bye) : this로는 window 객체
4. call 함수를 이용 : undefined인 경우 this로는 글로벌 객체인 window. binding할 객체를 정해주면 된다.
5. call 함수와 같음.
6. 멤버 함수를 변수로 할당해서 사용하는 경우도 일반함수 호출과 같음.
이런식으로 자바스크립트에서의 this는 함수나, 스코프 기반이 아니라 호출 방법에 따라 변경.
화살표 함수
화살표 함수는 자신의 this가 없습니다. 대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용됩니다.
화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다.
때문에 현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 됩니다.
this가 실행할 때 정해지는 것이 아니라 선언될 때 정해진다.
참고