.prototype 및 .constructor 정리
function typeClass1(x) {this.a=x;} ;
var typeClass2 = function () {} ;
var typeClass3 = new Function() ;
[인스턴스]
var oInstance1 = new typeClass1() ;
var oInstance2 = new typeClass2() ;
var oInstance3 = new typeClass3() ;
var oInstance4 = {} ;
var oString1 = 'abc' ;
var oString2 = new String('abc') ;
[prototype] → 생성자만이 가지는 프로퍼티
typeClass1.prototype = [object Object]
typeClass2.prototype = [object Object]
typeClass3.prototype = [object Object]
oInstance1.prototype = undefined
oInstance2.prototype = undefined
oInstance3.prototype = undefined
oInstance4.prototype = undefined
oString1.prototype = undefined
oString2.prototype = undefined
[constructor] → 모든 인스턴스가 가지고 있는 프로퍼티
typeClass1.constructor = function Function() { [native code] }
typeClass2.constructor = function Function() { [native code] }
typeClass3.constructor = function Function() { [native code] }
oInstance1.constructor = function typeClass1(x) { this.a = x; }
oInstance2.constructor = function () { }
oInstance3.constructor = function anonymous() { }
oInstance4.constructor = function Object() { [native code] }
oString1.constructor = function String() { [native code] }
oString2.constructor = function String() { [native code] }
[prototype.constructor] → prototype 을 생성자만이 가지고 있기 때문에 당연히 다음과 같다
typeClass1.prototype.constructor = function typeClass1(x) { this.a = x; }
typeClass2.prototype.constructor = function () { }
typeClass3.prototype.constructor = function anonymous() { }
[prototype.property] → prototype으로 확장해보면
typeClass1.prototype.method1 = function() { alert(1) ;};
for( p in typeClass1 ) {}
→ prototype : typeClass1.hasOwnProperty('prototype') => true , typeClass1.propertyIsEnumerable('prototype') => true
※ typeClass1 에는 prototype 프로퍼티만 존재하고 열거될 수 있다 (FF,Sarari)
for( p in oInstance1 ) {}
→ a : oInstance1.hasOwnProperty('a') => true , oInstance1.propertyIsEnumerable('a') => true
→ method1 : oInstance1.hasOwnProperty('method1') => false , oInstance1.propertyIsEnumerable('method1') => false
※ oInstance1 에는 생성자의 프로퍼티와 prototype 안에 확장된 프로퍼티가 열거될 수 있다
※ 직접정의된 a 와 직접정의되지않은 method1
propertyIsEnumerable 이면 반드시 hasOwnProperty 이다.
hasOwnProperty 이면 반드시 propertyIsEnumerable 인것은 아니다.
※ propertyIsEnumerable (직접정의+열거가능) ⊂ hasOwnProperty (직접정의)
for( p in typeClass1.prototype ) {}
→ method1 : typeClass1.prototype.hasOwnProperty('method1') => true , typeClass1.propertyIsEnumerable('method1') => true
※ typeClass1.prototype 에는 method1이 직접 정의되어 있으며 열거될 수 있다
typeClass1.prototype.hasOwnProperty('constructor') = true
typeClass1.prototype.propertyIsEnumerable('constructor') = false
Math.hasOwnProperty('sin') = true
Math.propertyIsEnumerable('sin') = false
String.hasOwnProperty('length') = true
String.propertyIsEnumerable('length') = false
typeClass1.hasOwnProperty('prototype') = true (모든 브라우저)
typeClass1.propertyIsEnumerable('prototype') = (FF,Safari : true, 이외 : false)
Number.prototype == 0
String.prototype ==
Boolean.prototype == false
Math.prototype == undefined
Date.prototype == Thu Jan 1 09:00:00 UTC+0900 1970(ie) : Invalid Date(FF,Sarafi) : Nan(Opera)
RegExp.prototype == //(ie,safari) : /(?:)/(opera,safari)
Array.prototype ==
Object.prototype == [object Object]
window.prototype == undefined
document.prototype == undefined
window == [object](IE) : [object Window](FF/Opera) : [object DOMWindow](Safari)
document == [object](IE) : [object HTMLDocument](FF/Opera/Safari)
typeClass1 == function typeClass1(x) {this.a=x;}
String == function String() { [native code] }
Number.constructor == function Function() { [native code] }
String.constructor == function Function() { [native code] }
Boolean.constructor == function Function() { [native code] }
Math.constructor == function Object() { [native code] }
Date.constructor == function Function() { [native code] }
RegExp.constructor == function Function() { [native code] }
Array.constructor == function Function() { [native code] }
Object.constructor == function Function() { [native code] }
window.constructor == undefined(IE) : [object Window](FF) : function Object() { [native code] } (Safari,Opera)
document.constructor == undefined(IE) : [object HTMLDocument](FF) : [object HTMLDocumentConstructor](Safari) : function Object() { [native code] }(Opera)
(1).constructor == function Number() { [native code] }
('abc').constructor == function String() { [native code] }
(true).constructor == function Boolean() { [native code] }
(new Date).constructor == function Date() { [native code] }
(new RegExp).constructor == function RegExp() { [native code] }
([]).constructor == function Array() { [native code] }
({}).constructor == function Object() { [native code] }
Javascript의 constructor 와 prototype from faidcy.tistory.com
생성자함수에서 Object.constructor 를 얻을 수 있다.
// Object.constructor 그리고 constructor 함수를 얻을 수 있다.
var Kitten = function () {};
var mii = new Kitten();
stdout.innerHTML += "mii.constructor : " + mii.constructor + "<br/>"; // function () {};
- 위에서 mii.constructor은 function () {}; 이 된다.
- 오브젝트를 생성할 때에 실행된 생성자 함수의 참조가 반환된다.
- constructor속성은 prototype으로 보관 유지 되고 있다.(Object의 속성이 아니다.)
- 같은 함수로 생성되어 설정되었다.
- prototype 을 전부 덧쓰기 하면 사라진다.
hasOwnProperty : native 메소드, 해당 오브젝트에 일치하는 프로퍼티가 있는지 알아보는 메소드
(있으면 true, 없으면 false)
위의 메소드로 constructor의 프로퍼티가 어떻게 있는지 알아보자.
mii.hasOwnProperty( "constructor" ) + "<br/>"; // false
stdout.innerHTML += "Kitten has? : " +
Kitten.hasOwnProperty( "constructor" ) + "<br/>"; // false
stdout.innerHTML += "Kitten.prototype has? : " +
Kitten.prototype.hasOwnProperty( "constructor" ) + "<br/>"; // true
위의 소스를 보면
mii.hasOwnProperty("constructor") 의 결과가 false 가 나온다.
분명 예제1 에서 보면 mii.constructor 의 결과가 function() {}; 이 나왔는데 왜 그런것일까?
var foo = new Abc();
foo.xyz();
1. 우선 foo.xyz 라고 하는 프로퍼티를 찾는다.
2. 없으면 Abc.prototype.xyz 라고 하는 프로퍼티를 찾는다.
그래서 예제1 에서 mii.constructor 은 결과적으로 Kitten.prototype.constructor 을 찾은것이다.
그것이 예제2 의 3번째 소스이다.
그럼 다음을 보자
// 함수를 생성한 시점에서 설정되어 있는 모습.
var Dog = function () {};
stdout.innerHTML += "Dog.prototype has? : " +
Dog.prototype.hasOwnProperty("constructor") + "<br/>"; // true
// 그래서 prototype를 전부 덧쓰기하면 사라진다.
var Penguin = function () {};
stdout.innerHTML += "Penguin.prototype constructor : " +
Penguin.prototype.constructor + "<br/>"; // function () { }
Penguin.prototype = {
hoge: function(){}
}
stdout.innerHTML += "Penguin.prototype constructor -2 : " +
Penguin.prototype.constructor + "<br/>"; // function Object() { [native code] }
함수를 처음 생성한 시점에서 위의 첫번째 소스와 같이 된다.
두번째 소스는 함수를 생성하고 constructor 속성을 보면 function() {}의 원래 값이 나온다.
그리고 prototype 으로 constructor 의 hoge프로퍼티를 추가해줬다.
그 후에 다시 constructor의 속성을 보면 function Object() { [native code] } 라고 나오는 것을 볼 수 있다.
이것은 prototype으로 추가를 해주면 constructor 속성까지 변한다는 것을 알 수 있다.
stdout.innerHTML += "EmperorPenguin.prototype constructor : " +
EmperorPenguin.prototype.constructor + "<br/>"; // function () { }
EmperorPenguin.prototype = new Penguin();
stdout.innerHTML += "EmperorPenguin.prototype constructor -2 : " +
EmperorPenguin.prototype.constructor + "<br/>"; // function Object() { [native code] }
위처럼 prototype 에 new 연산자를 써서 인스턴스를 재정의 해도 안된다.
이것을 방지하려면
다음과 같이 한다.
var Bull = function ( name ) {
this.name = name;
};
Bull.prototype = {
constructor: Bull.prototype.constructor, // 카피해 둔다.
equals : function( that ) {
return this.name == that.name;
}
};
var Bear = function ( name ) {
this.name = name;
}
Bear.prototype.equals = function( that ) { // 덧쓰기하지 않는다.
return this.name == that.name
&& this.constructor == that.constructor;
}
var bull = new Bull("a");
var bear = new Bear("a");
// Bull의 equals는 파생도를 체크하지 않기 때문에, name 프롭퍼티의 값이 같으면 true를 돌려준다.
stdout.innerHTML += bull.equals(bear) + "<br/>"; // true
// Bear의 equals는 파생도를 체크한다.name 프롭퍼티의 값이 같않아서 true가 되지 않는다.
stdout.innerHTML += bear.equals(bull) + "<br/>"; // false
위와 같이 카피나 덮어쓰지 않게 구분지어서 한다.
[출처] .prototype 및 .constructor 정리|작성자 CHO