sitelink1 | |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | http://1 |
extra_vars4 | ko |
extra_vars5 | http://faidcy.tistory.com/67 |
extra_vars6 | sitelink1 |
생성자함수에서 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
위와 같이 카피나 덮어쓰지 않게 구분지어서 한다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
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 및...) | 황제낙엽 | 2005.10.20 | 26 |
73 | 링크모음 | 황제낙엽 | 2011.03.25 | 25 |
72 | YUI Logger(Yahoo) 를 동적으로 로드하는 북마크릿 | 황제낙엽 | 2010.10.03 | 25 |
71 | 생성자 체인과 상속 | 황제낙엽 | 2008.08.08 | 24 |
70 | Date객체 - 날짜구하기 | 황제낙엽 | 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 | 동적인 언어를 동적으로 호출하기 | 황제낙엽 | 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 |