Function Object
function Object 와 function Instance
Built-in Function Object
자바스크립트에는 built-in Function Object가 있다.
Function.prototype.call()
형태로 자바스크립트에 만들어져 있다.
function book(){...}
와 같이 function 키워드로 function Object를 만들 수 있으며, 또한var temp = function(){...}
와 같이 function Object를 만들고 변수에 할당할 수 있다.- built-in의 Function.prototype에 메소드로 연결하는 방식이다.
function Instance
new
연산자를 사용해서new Book()
함수 인스턴스를 만들 수 있다.- Book.prototype에 연결된 메소드를 생성하는 것이다.
function Object의 생성
var book = function(){...}
와 같이 function 키워드를 이용하여 함수를 선언- 엔진이 function 키워드를 만나면, 엔진은 built-in Function Object의 prototype에 연결된 메소드로 function Object를 생성한다.
- 성격은 인스턴스이지만, new로 만든 인스턴스와는 차이가 있다.
- 생성한 function object를 book 변수에 할당한다.
- function object는 나중에
book()
과 같은 형태로 호출이 가능하다.
function Object 저장 형태
- 함수를 호출하려면, 생성한 function object를 저장해야 한다.
- function object는
{name : value}
형태로 저장한다.- book()함수의 경우
{book: 생성된 function object}
의 형태로 저장됨
- book()함수의 경우
- 함수를 호출하면, 이것저것 저장되어 있는 영역에 가서, 이름으로 value 값을 들고온다.(식별자 해결 Identifier Resolution) 이때 value가 function object면 함수 호출을 한다.
- function object만 따로 저장되어 있는 곳이 아니라, 변수들도 같이 저장되어 있을 것이란 걸 알 수 있다.
즉
- new를 사용해서 만든 function instance는
함수명.prototype
의 메소드로 연결되는 것이며, - function 키워드를 사용해서 만든 function object는
Function.prototype
의 메소드로 연결된다.(JS built-in Function Object의 메소드가 된다.)
- 함수가 호출되면 엔진은, 함수의 실행 환경(함수 내부에 선언된 변수나 함수)을
{name: value}
와 같은 프로퍼티 형태로 설정한 후에, 실행을 시작한다. - 따라서 함수나 변수나 엔진은 Identifier Resolution 단계를 거치고 value 값의 타입에 따라서 동작이 달라지게 된다.
Function Object의 생성과정
- 개발자가
function sports(){...}
키워드를 사용해서 함수를 선언 - 엔진이
function
키워드를 만나면, function object를 생성하고{sports : {...}}
의 형태로 저장한다. 이때 value 값 {...}은 아직 비어 있다.
지금부터 function object의 비어있는 value의 프로퍼티를 채워나간다.
- sports 오브젝트에
prototype
오브젝트를 프로퍼티로 넣는다. - prototype에
constructor
프로퍼티를 넣는다.- prototype.constructor가 sports 오브젝트를 참조한다. 상단에 쓰여있는 sports와 constructor의 sports는 값이 동일하다.
- prototype에
__proto__
오브젝트를 넣는다.- 엔진이 사용하기 위해 있는 프로퍼티.
sports = { prototype: { constructor: sports, __proto__: {}, }, };
- JS built-in Object.prototype의 메소드로 Object 인스턴스를 생성하고 **
prototype.__proto__
**에 할당한다.- built-in Object.prototype에 있는 기본적인 메소드 6개가 할당되는 것이다.
sports = { prototype: { constructor: sports, __proto__: Object.prototype, }, };
- sports 오브젝트에,
__proto__
프로퍼티를 추가한 후, JS built-in Function.prototype의 메소드로 Function 인스턴스를 생성하여 할당한다.- 이 단계에서,
call()
,bind()
,apply()
메소드가 첨부된다.
sports = { prototype: { constructor: sports, __proto__: Object.prototype, }, __proto__: Function.prototype, };
- 이 단계에서,
__proto__
가 두 개 존재하지만, 계층이 다름을 알고 있어아 한다.
sports.prototype.__proto__
에는 Object.prototype으로 할당(bulit-in Object가 생성되어 할당됨)sports.__proto__
에는 Function.prototype으로 할당(Built-in Function이 생성되어 할당됨)- 만약 생성하는 게 함수가 아니라, Array나 String이면, Array인스턴스나 String 인스턴스가 연결된다. 즉 object 타입에 따라서 바뀌는 부분이다.
- sports 오브젝트의 프로퍼티에 초기값 설정
-
argument
,caller
,length
,name
프로퍼티가 설정된다.sports = { argument: {}, caller: {}, length: 0, name: "sports", prototype: { constructor: sports, __proto__: Object.prototype, }, __proto__: Function.prototype, };
정리하자면,
우리는 함수라고 생각하지만, 엔진 관점에선 함수 또한 하나의 객체 sport = {}
라고 생각한다.