• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    미해결

fn 함수와 book.get 함수 차이 질문드립니다...ㅠㅠㅠ

22.02.22 20:01 작성 조회수 356

1

// 정리 시간
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"이 할당되어있던데 이거와 관련이 있는 것인지 궁금합니다!!...ㅠㅠㅠㅠㅠㅠㅠ

답변 1

답변을 작성해보세요.

0

왜 fn 함수와 book.get은 서로 다른 독립적인 function 오브젝트이면서...
==> 독립적이지 않습니다.

var fn = book.get;에서 get의 Function 오브젝트가 메모리에 설정됩니다.
이때 메모리 주소(address)가 100이라고 하겠습니다.

var fn = book.get;을 실행하면, 메모리 주소 100을 fn 변수에 설정합니다. 따라서 fn()을 호출하면 메모리 주소 100에 설정된 Function 오브젝트를 호출하게 되며, 이것은 book.get입니다.
즉, fn과 book.get이 같은 메모리 주소를 참조합니다.

 

재원허님의 프로필

재원허

질문자

2022.02.22

와.. 그러면 제가 한 번 더 book 오브젝트를 선언하여 {get: function 오브젝트} 프로퍼티를 대체해도 fn함수를 호출 시 함수 내 코드가 변하지 않았던 이유가 fn은 그대로 메모리 주소 100을 참조하니깐 그랬던 것이군요! 와.. 대박 감사합니다....!