본문 바로가기

FrontEnd/Javascript

리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입에 대하여

자바스크립트 Deepdive p272에 관한 내용정리이다.

이책을 시작한 이후 처음으로 내게 절망을 준 단원이고 그만큼 결국엔 보람을 준 단원이다. 이 단원에서 배운 가장 큰 사실은 JS에서 function foo( ) { } 라는 함수선언문이 문맥에 따라서는 함수객체도 될수 있고 함수 리터럴이 될 수도 있다는 점이다.

let obj={};//obj는 리터럴 표기법에 의해 생성된 객체로 Object생성자를 사용하지 않았지만 조사하면 그 결과는 Object생성자를
//사용하여 생성한 객체인 결과가 나온다.
console.log(obj.constructor===Object);//true
console.log(obj.__proto__===Object.prototype);//true
console.log(obj.__proto__)//[Object: null prototype]{}
console.log(obj.__proto__==Object.prototype)//true
console.log(obj.__proto__.__proto__)//null

obj=function(a,b){return a+b;};
console.log(obj.constructor==Function);//true
console.log(obj.__proto__.constructor==Function);//true

obj=[1,2,3];
console.log(obj.constructor==Array);;//true
console.log(obj.constructor)//[Function: Array]
console.log(obj.constructor==obj.__proto__.constructor);//true
class Foo extends Object{}
obj=new Foo();
console.log(obj.constructor);//[class Foo extends Object]
console.log(new Foo().__proto__.__proto__==Object.prototype);//true
console.log(new Foo().__proto__.constructor==Foo);//true
console.log(new Foo().constructor==Foo);//true
console.log(new Foo().__proto__.__proto__.constructor==Object);//true

let obj2=new Object(123);
console.log(obj2.constructor);//Number
console.log(obj2.__proto__.constructor);//Number
console.log(obj2.__proto__.__proto__.constructor);//Object

obj2=new Object("123");
console.log(obj2.constructor);//String
console.log(obj2.__proto__.constructor);//String
console.log(obj2.__proto__.__proto__.constructor);//Object


function foo(){}//이것은 함수선언문이지만 문맥에 따라 함수 객체이자, 함수 리터럴이 될수 있다.

console.log(foo.constructor)//Function
console.log(function boo(){}.constructor)//Function  //이와 같은 문맥에서 function boo(){}는 함수 리터럴로 사용되었다.
console.log(foo.constructor===Function);//true