sitelink1 | |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | http://1 |
extra_vars4 | ko |
extra_vars5 | http://faidcy.tistory.com/69 |
extra_vars6 | sitelink1 |
오브젝트의 특징으로서
모든 오브젝트는 __proto__ 프로퍼티를 가진다.
그리고
모든 함수오브젝트는 prototype 프로퍼티를 가진다.
또 new 에 의해서 작성된 오브젝트의
__proto__ 프로퍼티에는 그 함수의 prototype이 설정되어
__proto__ 는 constructor프로퍼티를 가진다.
이 constructor 프로퍼티는 new 한 함수 오브젝트를 가리키고 있다..
이게 뭔 소리여 -_- 전에 했던 말과 다르다..
분명한것은 익스플로어에서는 없어졌다는 것이다...
하지만 계속 봐보자.
아래와 같은함수 Parent.Child가 있다.
단순한 계승관계이다.
그리고 Child 클래스로부터 오브젝트를 작성한다.
이렇게 해서 4개의 오브젝트가 있다.
함수 오브젝트를 [ ]로 감싸서
위의 코드의 관계를 써본다.
이런 관계가 성립된다.
(?) 은 아직 정의되지 않은 예를 든 표현이다.
함수오브젝트에는 new 연산자로 오브젝트가 만들어지지 않았으니 임의의 오브젝트를 명시한것이다.
prototype 체인이란,
프로퍼티의 참조시에 연관된 것을 말한다.
위의 경우 (Child)의 프로퍼티hoge는
1. this.hoge
2. (Child).__proto__.hoge = (Parent)hoge = [Child].prototype.hoge
3. (Child).__ptoto__.__proto__.hoge = (Parent).__proto__.hoge = (?).hoge
의 순서에 의해 찾아가게 된다. (= 는 수학에서의 같다라는 표시이다.)
(?)는 다중계승하고 있는 경우, 똑같이 __proto__로 연결되어서 간다.
계승이 끝난 시점에서 (?)는 null 이 된다.
프로퍼티의 팜조시, (?)가 null의 경우 그 프로퍼티는 undefined 값이 된다.
아.. 복잡 -_-..
다시 코드를 보자
역시 생각대로 값이 나온다.
다음에는 prototype 에 null 값을 넣어보았다.
엥?
왜 저렇게 되었을까?
__proto__ 에는 null이 들어가 체인이 연결되지 않는 것이라고 생각했지만
2번째와 3번째의 결과로부터 null 은 아닌것 같다.
아무래도 생성자에서 prototype으로부터 __proto__에 값을 설정할때
prototype이 오브젝트가 아니면 Object.prototype을 설정하는것 같다.
그래서 다시 코드를 쳐보자.
오~ 역시 그렇게 되는군..
결론은 오브젝트를 상속받는다는 것이지.
모든 오브젝트는 __proto__ 프로퍼티를 가진다.
그리고
모든 함수오브젝트는 prototype 프로퍼티를 가진다.
또 new 에 의해서 작성된 오브젝트의
__proto__ 프로퍼티에는 그 함수의 prototype이 설정되어
__proto__ 는 constructor프로퍼티를 가진다.
이 constructor 프로퍼티는 new 한 함수 오브젝트를 가리키고 있다..
이게 뭔 소리여 -_- 전에 했던 말과 다르다..
분명한것은 익스플로어에서는 없어졌다는 것이다...
하지만 계속 봐보자.
아래와 같은함수 Parent.Child가 있다.
function Parent() { }
function Child() { }
Child.prototype = new Parent();
function Child() { }
Child.prototype = new Parent();
단순한 계승관계이다.
그리고 Child 클래스로부터 오브젝트를 작성한다.
var myobj = new Child();
이렇게 해서 4개의 오브젝트가 있다.
- Parent 함수 오브젝트
- Parent를 new한 오브젝트
- Child 함수 오브젝트
- Child를 new 한 오브젝트
함수 오브젝트를 [ ]로 감싸서
위의 코드의 관계를 써본다.
(?).constructor = [Parent]
[Parent].prototype = (?)
(Parent).__proto__ = [Parent].prototype = (?)
[Child].prototype = (Parent)
(Child).__proto__ = [Child].prototype = (Parent)
(Child).__proto__.constructor = [Child]
(Child).constructor = 'undefined'
[Parent].prototype = (?)
(Parent).__proto__ = [Parent].prototype = (?)
[Child].prototype = (Parent)
(Child).__proto__ = [Child].prototype = (Parent)
(Child).__proto__.constructor = [Child]
(Child).constructor = 'undefined'
이런 관계가 성립된다.
(?) 은 아직 정의되지 않은 예를 든 표현이다.
함수오브젝트에는 new 연산자로 오브젝트가 만들어지지 않았으니 임의의 오브젝트를 명시한것이다.
prototype 체인이란,
프로퍼티의 참조시에 연관된 것을 말한다.
위의 경우 (Child)의 프로퍼티hoge는
1. this.hoge
2. (Child).__proto__.hoge = (Parent)hoge = [Child].prototype.hoge
3. (Child).__ptoto__.__proto__.hoge = (Parent).__proto__.hoge = (?).hoge
의 순서에 의해 찾아가게 된다. (= 는 수학에서의 같다라는 표시이다.)
(?)는 다중계승하고 있는 경우, 똑같이 __proto__로 연결되어서 간다.
계승이 끝난 시점에서 (?)는 null 이 된다.
프로퍼티의 팜조시, (?)가 null의 경우 그 프로퍼티는 undefined 값이 된다.
아.. 복잡 -_-..
다시 코드를 보자
var Parent = function() { }
var Child = function() {}
Child.prototype = new Parent();
alert(new Child().__proto__ === Child.prototype); // true
var Child = function() {}
Child.prototype = new Parent();
alert(new Child().__proto__ === Child.prototype); // true
역시 생각대로 값이 나온다.
다음에는 prototype 에 null 값을 넣어보았다.
Child.prototype = null;
alert(Child.prototype === null); // true
alert(new Child().__proto__ === null); // false
alert(new Child().__proto__ === Child.prototype); //false
alert(Child.prototype === null); // true
alert(new Child().__proto__ === null); // false
alert(new Child().__proto__ === Child.prototype); //false
엥?
왜 저렇게 되었을까?
__proto__ 에는 null이 들어가 체인이 연결되지 않는 것이라고 생각했지만
2번째와 3번째의 결과로부터 null 은 아닌것 같다.
아무래도 생성자에서 prototype으로부터 __proto__에 값을 설정할때
prototype이 오브젝트가 아니면 Object.prototype을 설정하는것 같다.
그래서 다시 코드를 쳐보자.
alert(new Child().__proto__ === Object.prototype); //true
오~ 역시 그렇게 되는군..
결론은 오브젝트를 상속받는다는 것이지.
댓글 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 |