sitelink1  
sitelink2  
sitelink3  
sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://faidcy.tistory.com/67 
extra_vars6 sitelink1 

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


위와 같이 카피나 덮어쓰지 않게 구분지어서 한다.
번호 제목 글쓴이 날짜 조회 수
77 [펌] TAEYO.NET - JavaScript OOP 스트레칭 황제낙엽 2009.04.02 27
76 Rhino scopes and contexts 에 대한 문서 황제낙엽 2008.07.18 27
75 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 26
74 유용한 자바스크립트 예제 몇가지 (Tree 및...) file 황제낙엽 2005.10.20 26
73 링크모음 황제낙엽 2011.03.25 25
72 YUI Logger(Yahoo) 를 동적으로 로드하는 북마크릿 황제낙엽 2010.10.03 25
71 생성자 체인과 상속 황제낙엽 2008.08.08 24
70 Date객체 - 날짜구하기 file 황제낙엽 2008.02.19 24
69 CORS(Cross-Origin Resource Sharing) - 2 황제낙엽 2017.03.07 24
68 연산자 this 황제낙엽 2014.12.30 23
67 URI 인코딩을 해야 하는 문자들 황제낙엽 2009.09.02 23
66 [펌] 아사페릴의 사생활 - __proto__ 와 construct 와 prototype 황제낙엽 2009.04.02 23
65 String xml 파싱 황제낙엽 2008.11.03 23
64 XML+JS 연동 다중셀렉트박스 (1) - <font color="brown">(MS Explorer 전용)</brown> 황제낙엽 2005.12.02 23
63 파이어폭스로 스크립트 디버깅하기 황제낙엽 2009.01.14 22
62 동적인 언어를 동적으로 호출하기 file 황제낙엽 2008.07.14 22
61 [펌] TAEYO.NET - JavaScript OOP 코어객체와 prototype를 사용한 객체확장 황제낙엽 2009.04.02 21
60 Object 와 Prototype 황제낙엽 2008.08.08 21
59 [펌]자바스크립트에서 객체 생성 방법 황제낙엽 2008.08.07 21
58 감추기, 보이기 화면 예제 황제낙엽 2008.04.14 21