[javascript] .prototype과 .constructor

.prototype과 .constructor

SmartTV 프로젝트를 진행하면서 javascript를 조금더 깊이있게(?) 사용해 보기위해 상속효과라던지 prototype등 공부를 했었는데

잘 정리해준 글이 있어서 퍼왔다..

prototype Object 는 모든 인스턴스가 상속 받는다

function Circle(r) {
    this.r = r ;
}

Circle.prototype.area = function() {
    return this.r*this.r*Math.PI ;
}

prototype Object 는 모든 인스턴스가 상속 받으므로 클래스 변수와 클래스 메써드를 위치시키기 좋은 곳이다.

.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 를 얻을 수 있다.

예제 1  

var stdout = document.getElementById("stdout");

// 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의 프로퍼티가 어떻게 있는지 알아보자.

예제 2

stdout.innerHTML += "mii has? : " +
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() {}; 이 나왔는데 왜 그런것일까?

그것은 자바스크립트에서 prototype 이라는 프로퍼티가 있어서 프로퍼티를 탐색할 경우, 우선 오브젝트가 직접 가지고 있는 프로퍼티로부터, 해당의 프로퍼티를 검사후, 해당프로퍼티가 없으면 오브젝트 클래스(엄밀하게는 constructor 함수)의 prototype 프로퍼티중에서 찾는다.

var foo = new Abc();
foo.xyz();

1. 우선 foo.xyz 라고 하는 프로퍼티를 찾는다.
2. 없으면 Abc.prototype.xyz 라고 하는 프로퍼티를 찾는다.

그래서 예제1 에서 mii.constructor 은 결과적으로 Kitten.prototype.constructor 을 찾은것이다.
그것이 예제2 의 3번째 소스이다.

그럼 다음을 보자

예제 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 속성까지 변한다는 것을 알 수 있다.

예제 4

var EmperorPenguin = function () {};
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

출처 : http://rygh4775.blog.me/90162182784