정리시간입니다.

var book = {
  value: 123,
  get: function(){
    var value = 456;
    console.log(this === window);
    console.log(this.value);
  }
};
var fn = book.get;
fn();
// true
// undefined

1. strict 모드 환경이 아님
2. 함수 선언문이 없다.
3. 변수 초기화를 한다
   • book: undefined
   • fn: undefined
4. 코드를 실행한다.

book = {
  value: 123,
  get: function(){}
}

4. fn() 함수 호출 (book.get()을 실행)
5. fn() 함수는 글로벌 함수이고, 함수 이름만 작성하여 호출 가능.
6. 이때, 실행 콘텍스트를 생성하고, this 바인딩 컴포넌트에 window가 바인딩된다.
7. this는 window를 참조하게 된다.
8. 또한 글로벌 오브젝트를 windonw 오브젝트가 참조함
9. book.get 함수 안으로 들어감
10. 함수 내부에 함수 선언문이 없다.
11. 변수 초기화
    • value: undefined
12. 코드 실행
    • value: 456가 설정
    • console.log(this === window); 는 true를 출력
    • console.log(this.value)에서도 this가 window를 참조
    • window 즉, 글로벌 오브젝트에는 value라는 프로퍼티 이름을 가진 프로퍼티가 존재하지 않아서 undefined를 출력
      • 여기서 console.log(value)를 하면 456
      • console.log(book.value)를 하면 123
      • console.log(window.value)를 하면 undefined가 출력되는 것을 알 수 있음

실행 콘텍스트: {
  렉시컬 환경 컴포넌트: {
    환경 레코드: {
      book: Object,
      fn: function(){}
    },
    외부 렉시컬 환경 참조 {}
  },
  변수 환경 컴포넌트: {},
  this 바인딩 컴포넌트: {
    this: window
  }
}

(get) 실행 콘텍스트: {
  렉시컬 환경 컴포넌트: {
    환경 레코드: {
      value: 456,
    },
    외부 렉시컬 환경 참조: {
      value: 123,
    }
  },
  변수 환경 컴포넌트: {},
  this 바인딩 컴퍼넌트: {
    this: book
  }
}

function getTitle(){
  console.log("HTML");
};
var book = function(){
  function getTitle(){
    console.log("JS");
  };
  this.getTitle();
  getTitle();
};
book();
// HTML
// JS

1. strict 모드 환경이 아님
2. 함수 선언문을 만나 getTitle function 오브젝트 생성
3. 변수 초기화를 한다
   • book: undefined
4. 코드를 실행한다.

getTitle: function(){}
book: function(){}

5. book() 함수 호출
6. book() 함수는 글로벌 함수이고 호출되면서 실행 콘텍스트를 생성하고 this 바인딩 컴포넌트에 window를 참조
7. this는 window를 참조하게 된다.
8. 또한 글로벌 오브젝트를 windonw 오브젝트가 참조함
9. book 함수 내부로 들어감
10. 함수 선언문 getTitle을 만나서 function 오브젝트 생성
11. getTitle은 렉시컬 환경 컴포넌트의 환경 레코드에 설정
12. 함수 표현식과 변수가 없어서 변수 초기화는 패스
13. 코드 실행
14. this.getTitle() 함수를 호출할 때, this는 window를 참조함
15. window 즉, 글로벌 오브젝트에 getTitle이라는 프로퍼티 이름을 검색

getTitle: function(){
  console.log("HTML");
}
book: function(){
  getTitle: function(){}
}

15. getTitle이 존재하므로 함수 실행
16. console에 HTML 출력
17. 다시 book 함수 내부의 getTitle();를 만나서 호출
18. 환경 레코드에서 getTitle이 존재하여 실행
19. console에 JS 출력

실행 콘텍스트: {
  렉시컬 환경 컴포넌트: {
    환경 레코드: {
      book: function(){},
      getTitle: function(){}
    },
    외부 렉시컬 환경 참조 {}
  },
  변수 환경 컴포넌트: {},
  this 바인딩 컴포넌트: {
    this: window
  }
}

(getTitle) 실행 콘텍스트: {
  렉시컬 환경 컴포넌트: {
    환경 레코드: {},
    외부 렉시컬 환경 참조 {
      book: function(){}
    }
  },
  변수 환경 컴포넌트: {},
  this 바인딩 컴포넌트: {
    this: window
  }
}

(book) 실행 콘텍스트: {
  렉시컬 환경 컴포넌트: {
    환경 레코드: {
      getTitle: function(){}
    },
    외부 렉시컬 환경 참조 {
      getTitle: function(){}
    }
  },
  변수 환경 컴포넌트: {},
  this 바인딩 컴포넌트: {
    this: window
  }
}

(getTitle) 실행 콘텍스트: {
  렉시컬 환경 컴포넌트: {
    환경 레코드: {},
    외부 렉시컬 환경 참조 {
      getTitle: function(){}
    }
  },
  변수 환경 컴포넌트: {},
  this 바인딩 컴포넌트: {
    this: book
  }
}