| 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
위와 같이 카피나 덮어쓰지 않게 구분지어서 한다.