this 퀴즈

다음의 코드가 실행되며 출력되는 내용은?

(Jason이 제작한 퀴즈를 들고 왔습니다..)

 

https://jason-log.vercel.app/JavaScript/this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80./

this란 무엇인가.

 

var str = 'React';

function outer() {
    console.log(str)
    console.log(this) 

    function inner(){
        console.log(str)
        console.log(this)

    }
    var str = 'Hello';

    return inner;
}

var obj = {
    f: outer()
}

setTimeout(obj.f, 1000);

outer.apply({
    str:'Bye'
})

 

함수 실행은 총 몇 번 되는가?

 답 : 3번

// 해설
var obj = {
	f : outer();  // ()를 붙였기 때문에 함수 할당 및 실행
} 

setTimeout(obj.f, 1000); // 대표적인 window의 콜백 함수

outer.apply({ 
	//apply() : 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출
    str : 'Bye';
})

 

해당 코드가 실행되며 출력되는 값의 순서는?

답 : obj => outer.apply => setTimeout()

// 해설
var obj = {
	f : outer(); // (1)
} 

setTimeout(obj.f, 1000); // (3) 1000ms 즉 1s 뒤에 실행됨

outer.apply({ // (3)
    str : 'Bye'; 
})

 

해당 코드가 실행되며 출력되는 값은?

f: outer()  출력

     str : undefined

     this : 전역객체

 

setTimeout(obj.f, 1000)  출력

// return된 inner 함수 실행

     str : Hello

      // inner 내부에 str 존재  => outerEnvironment를 통해 outer의 LE를 찾음 => 스코프 체인

     this : Timeout객체 or Window 객체

      // setTimeout은 콜백 함수

      // 크롬 개발자 도구에서 돌릴 시 window 객체 출력됨

 

outer.apply({ str : 'Bye'}) 출력 
     str : undefined 
     this : {str : 'Bye'}

    // this 값을 str에 새로운 값을 할당하여 넘김으로 설정함