Javascript의 constructor 와 prototype

생성자함수에서  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

위와 같이 카피나 덮어쓰지 않게 구분지어서 한다.