this 란

this란 자신이 속한 객체 또는 자신이 생성할 인스턴스 를 가리키는 자기 참조 변수(self-reference variable)입니다. 즉, 우리는 this를 통해 객체나 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다

js코드는 위에서부터 읽힌다. 함수의 호출부분이 나올 때마다 call-stack(호출스택)에 쌓이고 쌓인 반대방향으로 실행된다.(가장 나중에 들어온 함수부터) 함수의 실행이 완료되면 call-stack에서 사라진다.

이를 간단한 코드를 통해 풀이하고 있다. 직접 크롬에서 디버그 해보면 이해가 빠르다.

function baz() {
    // call-stack is: `baz`
    // so, our call-site is in the global scope

    console.log( "baz" );
    bar(); // <-- call-site for `bar`
}

function bar() {
    // call-stack is: `baz` -> `bar`
    // so, our call-site is in `baz`

    console.log( "bar" );
    foo(); // <-- call-site for `foo`
}

function foo() {
    // call-stack is: `baz` -> `bar` -> `foo`
    // so, our call-site is in `bar`

    console.log( "foo" );
}

baz(); // <-- call-site for `baz`

global scope에서 baz()를 호출한다. 따라서 call-site는 전역(global-scope)이다.

baz()함수는 bar()를 호출하므로 bar()를 부르는 call-site는 baz()함수 내부이다.

* call-stack

맨 처음 global-scope baz를 호출할 때

anonymous의 콜스택이 생긴다. 호출 순서로 마지막 foo()까지 쌓이게 된다.

* console

콘솔창에는 당연히 baz부터 실행되므로 왼쪽과 같은 순서로 나타나며

함수의 실행이 끝나면 call-stack에서 사라진다.