>  기사  >  웹 프론트엔드  >  js constructor_javascript 스킬의 실제 역할 분석

js constructor_javascript 스킬의 실제 역할 분석

WBOY
WBOY원래의
2016-05-16 17:59:351226검색
코드 복사 코드는 다음과 같습니다.

<script> Function.prototype.createInstance = function( ){ <br>var T = function(){}; <br>T.prototype = this.prototype; <br>T.constructor = this <br>var o = new T(); apply(o , 인수); <br>return o; <br>}</script>

위 코드에서 T.constructor = this 문장에 대해 말씀해 주세요. 문장은 실용적인 의미가 없습니다.
T.constructor 자체가 Function이어야 하는데 왜 Function의 인스턴스로 설정해야 할까요?

코드 복사 코드는 다음과 같습니다.
<script> <br>Function.prototype.$extends = function(p){ <br>this.$super = p; <br>var fn = function (){}; <br>fn.prototype = p.prototype; <br>this.prototype = new fn() <br>//생성자가 하위 클래스 인스턴스를 생성하는 것은 여전히 ​​하위 클래스의 생성자 함수를 가리키고 있습니다. <br>this.prototype.constructor=this <br>//------ ------- -- <br>return this <br>}; <br>function Animal(){ <br>} <br>function Cat(){ <br>} <br>Cat.$ extends(Animal); <br>var bb=new Cat(); <br>alert(bb.constructor) <br>//그러나 (this.prototype.constructor=this)는 다음을 통해 Animal의 프로토타입으로 돌아갈 수 없습니다. bb object<br>//다음 문은 여전히 ​​Animal <br>alert(bb.constructor.prototype.constructor) <br></script>

가 아닌 Cat 함수를 반환합니다. 위 코드에서 하위 클래스 생성자가 여전히 하위 클래스 함수를 가리키지만 객체의 프로토타입 체인 반환이 상위 클래스 프로토타입에 도달할 수 없다는 점을 수정하는 문장을 직접 추가했습니다. 해결 방법은
this.prototype.constructor=를 제거하는 것입니다. this; 둘 다 프로토타입의 생성자 속성을 설정하는 대신 다음 코드와 같이 인스턴스의 생성자 속성을 설정합니다.

코드 복사 코드는 다음과 같습니다.
<script> <br>Function.prototype.$extends = function(p){ <br>this.$super = p; >var fn = function(){}; <br> fn.prototype = p.prototype; <br>this.prototype = new fn() <br>return this; ){ <br>} <br>function Cat() { <br>this.constructor=args.callee; <br>} <br>Cat.$extends(Animal) <br>var bb=new Cat() ; <br>alert(bb.constructor); <br>//이 접근 방식은 bb 객체 <br>alert(bb.constructor.prototype.constructor) <br></를 통해 Animal의 프로토타입으로 거슬러 올라갈 수 있습니다. script> <br><br> <br>최종 분석 생성자의 실제 기능<br><br> </div> <br><br>코드 복사<div class="codetitle"><span><a style="CURSOR: pointer" data="1978" class="copybut" id="copybut1978" onclick="doCopy('code1978')"> 코드는 다음과 같습니다. <u><div class="codebody" id="code1978"> <br><script> <br>//함수 정의 <br>var f=function(){ <br>} <br>//f의 생성자는 f 내부의 함수이므로 여기서는 true로 표시됩니다. 프로토타입 속성인 _proto_는 Function의 프로토타입인 생성자의 프로토타입에 할당됩니다. <br>//instanceof는 f 내부의 _proto_가 Function.prototype과 공통 노드를 가지고 있는지 확인하고, 그렇다면 true를 반환합니다. <br> 경고( f 인스턴스of 함수) <br>//obj는 f의 인스턴스입니다<br>var obj=new f; <br>//obj 내부의 프로토타입 속성 _proto_는 새로운 f가 사용될 때 f.prototype에 할당됩니다. 당연히 f입니다. 프로토타입과 Function.prototype에는 공통 노드가 없으므로 false가 표시됩니다 <br>alert(obj 인스턴스of Function)<br>//obj를 Function의 인스턴스로 만들기 위해 (obj 인스턴스of Function)이 true로 표시됩니다<br> / /Only f.prototype=Function.prototype <br>f.prototype=Function.prototype; <br>//그러나 f.prototype을 수정하면 Function.prototype이 파괴되므로 위의 접근 방식을 권장하지 않습니다. .prototype.name="51js"는 또한 함수 프로토타입에 이름 속성을 추가합니다 <br>//f.prototype.name과 같은 수정으로 인해 함수 프로토타입이 파괴되지 않도록 올바른 접근 방식은 다음과 같아야 합니다 <br> f.prototype=new 함수(); <br>f.prototype.name="zhouyang"; <br>/**핵심은 여기에 있습니다. 생성자 속성을 다시 f로 조정하고 생성자를 유지하여 obj가 프로토타입 체인으로 올바르게 돌아갈 수 있도록 합니다. <br>* obj 내부에 프로토타입 체인을 가져오고 싶지만 obj만 알고 있는 경우, obj가 무엇인지 모릅니다. 어떻게 인스턴스화합니까? obj 내부의 _proto_ 속성이 표시되지 않으므로 obj의 내부 프로토타입을 얻으려면 obj.constructor를 통해서만 생성자를 얻을 수 있습니다. 생성자의 프로토타입 <br>*1. 다음 문장(f.prototype.constructor=f)을 추가하여 obj 프로토타입 체인 <br>*으로 돌아가면 1계층 프로토타입 체인으로만 돌아갈 수 있습니다. obj.constructor.prototype (하위 클래스 프로토타입) -->obj.constructor .prototype.constructor.prototype (여전히 하위 클래스 프로토타입), 이는 프로토타입 체인의 1개 레이어만 반환할 수 있습니다<br>**/ <br>f.prototype.constructor=f <br>obj=new; f; <br>alert("하위 클래스를 찾았습니다---" obj.constructor "n" <br> "아직 하위 클래스를 찾았지만 상위 클래스를 찾을 수 없습니다---" obj.constructor.prototype.constructor) <br>alert( obj 인스턴스of 함수) <br>/**2. f <br>*의 프로토타입 생성자 대신 f의 정의에서 f의 인스턴스 생성자를 설정하기 위해 다음 메소드를 사용하면 obj인 2계층 프로토타입 체인으로 돌아갈 수 있습니다. .constructor.prototype (하위 클래스 프로토타입) - ->obj.constructor.prototype.constructor.prototype (상위 클래스 프로토타입) <br>*분명히 이 상황은 객체 프로토타입 상속 체인과 일치합니다<br>*/ <br>f=function(){ <br>this.constructor=arguments.callee; <br>} <br>f .prototype=new Function() ; <br>f.prototype.name="zhouyang"; <br>obj=new f; <br>alert("하위 클래스를 찾았습니다---" obj.constructor "n" <br> "상위 클래스를 찾았습니다.- -" obj.constructor.prototype.constructor) <br>alert(obj 인스턴스of Function) <br></script>

코드 복사 코드는 다음과 같습니다.

<script> <br>//함수 정의 <br>var f=function(){ <br>} <br>//f의 생성자는 f 내부의 함수이므로 여기서는 true로 표시됩니다. 프로토타입 속성인 _proto_는 Function의 프로토타입인 생성자의 프로토타입에 할당됩니다. <br>//instanceof는 f 내부의 _proto_가 Function.prototype과 공통 노드를 가지고 있는지 확인하고, 그렇다면 true를 반환합니다. <br> 경고( f 인스턴스of 함수) <br>//obj는 f의 인스턴스입니다<br>var obj=new f; <br>//obj 내부의 프로토타입 속성 _proto_는 새로운 f가 사용될 때 f.prototype에 할당됩니다. 당연히 f입니다. 프로토타입과 Function.prototype에는 공통 노드가 없으므로 false가 표시됩니다 <br>alert(obj 인스턴스of Function)<br>//obj를 Function의 인스턴스로 만들기 위해 (obj 인스턴스of Function)이 true로 표시됩니다<br> / /Only f.prototype=Function.prototype <br>f.prototype=Function.prototype; <br>//그러나 f.prototype을 수정하면 Function.prototype이 파괴되므로 위의 접근 방식을 권장하지 않습니다. .prototype.name="51js"는 또한 함수 프로토타입에 이름 속성을 추가합니다 <br>//f.prototype.name과 같은 수정으로 인해 함수 프로토타입이 파괴되지 않도록 올바른 접근 방식은 다음과 같아야 합니다 <br> f.prototype=new 함수(); <br>f.prototype.name="zhouyang"; <br>/**핵심은 여기에 있습니다. 생성자 속성을 다시 f로 조정하고 생성자를 유지하여 obj가 프로토타입 체인으로 올바르게 돌아갈 수 있도록 합니다. <br>* obj 내부에 프로토타입 체인을 가져오고 싶지만 obj만 알고 있는 경우, obj가 무엇인지 모릅니다. 어떻게 인스턴스화합니까? obj 내부의 _proto_ 속성이 표시되지 않으므로 obj의 내부 프로토타입을 얻으려면 obj.constructor를 통해서만 생성자를 얻을 수 있습니다. 생성자의 프로토타입 <br>*1. 다음 문장(f.prototype.constructor=f)을 추가하여 obj 프로토타입 체인 <br>*으로 돌아가면 1계층 프로토타입 체인으로만 돌아갈 수 있습니다. obj.constructor.prototype (하위 클래스 프로토타입) -->obj.constructor .prototype.constructor.prototype (여전히 하위 클래스 프로토타입), 이는 프로토타입 체인의 1개 레이어만 반환할 수 있습니다<br>**/ <br>f.prototype.constructor=f <br>obj=new; f; <br>alert("하위 클래스를 찾았습니다---" obj.constructor "n" <br> "아직 하위 클래스를 찾았지만 상위 클래스를 찾을 수 없습니다---" obj.constructor.prototype.constructor) <br>alert( obj 인스턴스of 함수) <br>/**2. f <br>*의 프로토타입 생성자 대신 f의 정의에서 f의 인스턴스 생성자를 설정하기 위해 다음 메소드를 사용하면 obj인 2계층 프로토타입 체인으로 돌아갈 수 있습니다. .constructor.prototype (하위 클래스 프로토타입) - ->obj.constructor.prototype.constructor.prototype (상위 클래스 프로토타입) <br>*분명히 이 상황은 객체 프로토타입 상속 체인과 일치합니다<br>*/ <br>f=function(){ <br>this.constructor=arguments.callee; <br>} <br>f .prototype=new Function() ; <br>f.prototype.name="zhouyang"; <br>obj=new f; <br>alert("하위 클래스를 찾았습니다---" obj.constructor "n" <br> "상위 클래스를 찾았습니다.- -" obj.constructor.prototype.constructor) <br>alert(obj instanceof Function) <br></script>결론 생성자의 역할은 객체의 프로토타입 체인을 유지하는 것입니다

Guoguo와 Winter에게 조언을 구하고 싶습니다. 또한, 모두가 자주 언급하는 프로토타입의 오염이 무엇인지 궁금합니다. ?
다음은 기능에 대한 설명입니다
코드 복사 코드는 다음과 같습니다.

< 스크립트>
var f = function(x){}
f.prototype={}
alert((new f).constructor)
f.prototype.constructor=f;
alert((new f).constructor)
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:jQuery 소스코드 분석-01 전체 아키텍처 분석_jquery다음 기사:jQuery 소스코드 분석-01 전체 아키텍처 분석_jquery

관련 기사

더보기