인프런 커뮤니티 질문&답변

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

정리 시간1을 공부하면서 fn() 함수 호출 시 새롭게 할당된 function 오브젝트인 fn() 함수 안으로 들어가는 것인지
아니면 book.get 함수 안으로 들어가는 것인지 궁금해서 첫 줄에 debugger를 작성하여 한 줄씩 이동해서 확인해봤더니
book.get 함수 안으로 이동하는 것을 확인했습니다.

근데 저는 왜 새롭게 할당된 fn 함수 안으로 엔진이 이동을 안하는 것인지 궁금합니다. 그래서 이것이 설정이 아니라 참조인가 해서
확인하려고 다음과 같은 코드를 실행했습니다.

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

 

마지막에서 두 번째 줄인 fn() 함수는 그대로 처음 할당된 book 오브젝트를 경로로 get 함수에 들어가고
마지막 줄인 book.get() 함수는 마지막에 할당된 book 오브젝트를 경로로 들어가는 것을 확인해서 참조는 아닌 것을 확인했습니다.

왜 fn 함수와 book.get은 서로 다른 독립적인 function 오브젝트이면서 fn() 함수를 호출했을 때 book 오브젝트 안의 get 함수 안으로 엔진이 이동하는 것인지 궁금합니다....ㅠㅠㅠㅠㅠ

그리고 debugger 창을 열어서 확인했는데 fn function 오브젝트의 name 프로퍼티 값으로 "get"이 할당되어있던데 이거와 관련이 있는 것인지 궁금합니다!!...ㅠㅠㅠㅠㅠㅠㅠ