//자바스크립트에서 this는 결국, this가 어디에 있던 간에, 그 this를 어떻게 부르냐, 어떻게 호출을 하냐에따라서 this 가 정해진다.즉, 바뀐다
//원래 this 는 window이다.
function foo() {
console.log(this);
}
//지금 foo함수안에 this 이다.
const obj = {
list: [1, 2, 3],
foo,
};
foo();
//그냥 foo 호출하면 당연히 this는 window이다.
//근데,
obj.foo();
// 오브젝트안에 foo를 넣고, 실행시키면, this는 obj 가 된다.
//즉,
// this 는
// foo함수에서 부를때는, this 가 window이고,
//obj 안에서 foo함수 호출해서 this 하면, this는 obj 이다.
//즉, this는 어디에 있든 상관없이,
// 어떻게 불렀냐에 따라 this가 바뀐다.
//물런 , 강제로 this를 지정해줄 수 있다, 설정해줄 수 있다.
//call 이나 bind 쓰면된다.
const obj2 = {
list: [4, 5, 6],
};
foo.call(obj2);
//하면 this는 강제로 obj2 로 지정이 된다.
///////////////////////////////////////////////
// 화살표 this
// 화살표 함수안의 this는 선언이 될떄 결정된다.
//일반 함수에서는,
const foo1 = {
list: ["a", "b"],
getList() {
return this;
},
};
foo1.getList();
//여기서 this는 당연히 foo1 을 가르킨다. foo1이라는 객체 안에서 this를 불렀기 때문에 this는 객체를 가르킨다.
//그리고
const foo2 = {
list: ["a", "b"],
getList() {
setTimeout(function () {
console.log(this.list); //undefined
console.log(this); //window
}, 2000);
},
};
foo2.getList();
//이렇게 비동기로 부르게되면,
//undefined가 나오게된다.
//그리고 this는 윈도우를 가르킨다.
// 비동기이기 떄문에, foo2객체와의 연결이 끊어지기 떄문에, 셋타임함수 자체만 실행,
//즉 셋타임함수 단독으로 실행됨,그래서 윈도우에서 실행된다. 그래서 this는 윈도우다.
// 이걸 해결 하려면, 화살표 함수를 쓰면된다.
const foo3 = {
list: ["a", "b"],
getList() {
setTimeout(() => {
console.log(this.list);
console.log(this); //foo3
}, 2000);
},
};
foo3.getList();
//화살표함수의 this는 부모의 this를 따른다.
//////////////////////////////////////////////
//this 를 크롬 개발자도구에서 디버거로 확인할 수 있다.
const foo4 = {
list: ["a", "b"],
getList() {
setTimeout(() => {
debugger; // 여기 디버거를 걸어주고
console.log(this.list);
console.log(this);
}, 2000);
},
};
foo4.getList();
//개발자도구 가서, source 탭에서, 아래 보면, Scope 에서 확인해보면되는데, 거기 this를 확인 해 볼 수 있다.
//this는 모든곳에 존재함
//함수안의 this는 함수를 어떻게 호출 했는가에 달렸다.
//화살표 함수안의 this는 블록스코프를 따름, 즉 쉽게 생각해서, 부모 this를 따른다고 생각하면됨
//디버깅 해보면됨 (debugger 걸고 개발자 도구 ㄱ ㄱ)
