>  기사  >  웹 프론트엔드  >  javascript는 프로토타입 상속을 사용하여 객체 system_javascript 기술을 구현합니다.

javascript는 프로토타입 상속을 사용하여 객체 system_javascript 기술을 구현합니다.

WBOY
WBOY원래의
2016-05-16 18:31:36881검색

JavaScript에서 객체에는 프로토타입이 없지만 생성자에는 프로토타입이 있습니다
. 프로토타입의 의미는 생성자에 프로토타입 객체 A가 있는 경우 생성자가 만든 인스턴스를 A

에서 복사해야 한다는 것입니다. 코드 복사 코드는 다음과 같습니다.

/*생성자 2개 선언*/
var flower=function( ){
this.name="nokia";
}
var flower2=function(){
this.age=22;
}
/*프로토타입 체인*/
flower2.prototype=new flower();
/*지금 프로토타입의 정의에 따르면 인스턴스 obj는 new flower();*/
obj=new flowe2(); >/*상위 클래스 Properties에서 상속됨*/
alert(obj.name) //==>"nokia"
alert(obj.age); //==>22

구조 생성자에 의해 생성된 인스턴스의 생성자 속성은 기본적으로 항상 생성자를 가리킵니다.
alert(obj.constructor);//==>flower
생성자 프로토타입은 생성자 자체를 가리킵니다.
alert( flower.prototype.constructor==flower);//==>true
생성자가 프로토타입 상속과 충돌합니다

코드 복사 코드는 다음과 같습니다.
function flower(){}
function flower2(){}
flower2.prototype =new flower();
var obj1=new flower();
var obj2=new flower2()
/*문제가 발생합니다. 두 인스턴스의 생성자 속성이 flower*/를 가리킵니다. >alert(obj1.constructor==obj2.constructor);
/*obj1 및 obj2는 동일한 생성자를 가리키는 다른 생성자에 의해 생성된 인스턴스입니다. 분명히 문제가 있습니다*/


해결 방법


flower2.prototype=new flower() ;
/*프로토타입을 재설정한 후 Prototype의 생성자 속성을 수정합니다*/
flower2.prototype.constructor=flower2
또는 인스턴스를 생성할 때마다 생성자 속성을 재정의합니다
function flower2(){
this.constructor=arguments.callee;
}
flower2.prototype=new flower();


또한 프로토타입 상속은 상위 클래스를 호출하는 메서드를 제공하지 않습니다.
그러나 우리는 프로토타입 상속을 기반으로 하며 이러한 결점을 보완하기 위해 부모 클래스를 정적 ​​변수로 기록합니다


var Class={
create :function()
{
var _class=function()
{
this.init.apply(this,arguments);
_class.prototype.init=Function.prototype.init;
try{
return _class; _class=null;
}
}
};
//기본 생성자
Function.prototype.init=function(){}
//메서드 확장
함수. 프로토타입.extend=function(list)
{
for(var i in list)this.prototype [i]=list[i]
return this; -level 상속
Function.prototype.inherits=function(parent)
{
//상속 깊이 수준
var _length=0//메소드 속성 이식
this.extend (new parent());//초기화 생성자 클래스의 상속은 일반적으로 생성자를 상속하지 않습니다.
this.prototype.init=Function.prototype.init;
//클래스의 정적 부모 클래스
this.parent=parent;
//부모 클래스 함수 실행
this.prototype.parent= function(name)
{
//매개변수가 없으면 생성자 실행
if(!name)name='init';
//실행할 상위 클래스
var _parent= parent
//현재 상위 클래스에서 실행 중인 경우 계속 살펴보세요. 슈퍼 클래스 위로
if(_length)
{
for(var i=0;i<_length;i )
{
_parent=_parent.parent
}
}
//레벨 설정
_깊이;
try{
//함수를 실행하고 값을 반환합니다.
return _parent.prototype[name].apply(this,Array.prototype .slice.apply(arguments,[1]));
}catch(e){
throw(e);
}finally {
//복구 수준
_length--;
}
}
반환
}


예:




코드 복사

코드는 다음과 같습니다.

//class1이라는 생성자를 만듭니다.var class1=Class.create ().extend({ b:function() { alert('clas'); alert(this.c) },
c:100
}); "object"(생성자)
var s=new class1();
s.b();// ==>"clas",100


상위 클래스 상속 및 호출 상위 클래스의 메서드:




코드 복사


코드는 다음과 같습니다.

var test=Class.create().inherits(class1).extend({
b:function()
{
alert('test');
이것입니다. parent('b')
},
c:110
});
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.