js 상속_javascript 기술 구현 코드-JS 튜토리얼-php.cn

js 상속_javascript 기술 구현 코드

WBOY

풀어 주다： 2016-05-16 18:21:47

원래의

1447명이 탐색했습니다.

base.js --상속 구현 ===========================
[참고]: 상속 후 상위 클래스가 class 이면 해당 속성, 메서드(프로토타입으로 선언된 메서드 포함) 및 정적 메서드를 상속합니다. 그렇지 않으면 속성과 메서드만 상속됩니다.

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

 
Object.prototype.extendf= 함수(a ,b) { 
if(!a||!b) return; 
var fa = typeof a=="function" 
var fb = typeof b=="function"; cha = function (a,b){ 
for(var c in b){ 
if(a[c]==undefine)//하위 클래스 다시 작성 
a[c]=b[c]; 
} 
return a; //상속된 객체 반환 
} 
if(fa&&fb){ 
b.apply(this,a.arguments) 
cha(a,b) ); 
this["base"] =new b;//base를 통해 상위 클래스에 액세스 
return cha(this,b.prototype) 
} 
else if(!fa&&fb){ 
cha(a,new b); 
a["base"]= new b 
return cha(a,b) 
}else if(fa&!fb){ 
 cha (a,b); 
this["base"]=b; 
return cha(this,b) 
}else if(!fa&&!fb){ 
a["base " ]=b; 
return cha(a,b); 
} 
} 

 

테스트 페이지: 사용법

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

type="text/javascript">
var car2 = {
name: "자동차 [상위 카테고리]",
가격: "수만 [상위 카테고리]",
start : 함수 ( ){
alert(this.name " 시작됨 2! [상위 클래스]")
},
run : function(){
alert(this.name " 실행 중 2. . . [상위 클래스]");
},
stop: function(){
alert(this.name "Stopped 2! [Parent class]");
},
remark: function(){return "[부모 클래스] 2 I am a car" this.name "; value" this.price;}
// this.remark = "I am a car" this.name " ;The value of "this.price;
}
//car2.prototype.extra = function(ext){
// return this.name "관세 2는 다음과 같습니다. " ext;
// }
car2.protect = "[상위 클래스] 2 보호";
car2.noExtra = function(){
return car.protect "관세 없음 2 [상위 클래스]"
}
var car = function(name,price){
this.name=name||"자동차 [상위 클래스]"
this.price=price||"수만 대 [상위 클래스]" ; 🎜>this.start = function(){
alert(this.name " 시작됨! [상위 클래스]")
this.run = function(){
Alert(this .name " 운전 중... [상위 클래스]");
this.stop= function(){
alert(this.name " 중지됨! [상위 클래스] ]")
};
this.remark = function(){return "[부모 클래스] 나는 "this.name"; 값입니다." this.price;}// this .remark = "나는 a car" this.name ";value" this.price; //이렇게 하면 이름과 가격이 전달된 매개변수를 가져오지 않으므로 주석을 달아
}
car.prototype.extra = function( ext){
return this.name "관세는 [상위 클래스]입니다:"
}
car.protect = "[상위 클래스] protected"
car.noExtra( ){
return car.protect "관세 없음 [상위 클래스]"
var BMW = function(){
this.extendf(BMW,car); name = "BMW [하위 클래스]";
this.start=function(){
alert(this.name "전용 시동 장치! ");
};
return ("this.name1=" this.name);
}
var BMW2 = function(){
this.extendf(BMW2,car2);
this.name = "BMW Ultimate No.2 [하위 카테고리]";
this.start=function(){
alert(this.name "전용 시동 장치 No.2 Future!"); 🎜 >};
return ("this.name1=" this.name);
}
var bensi = {
이름:"bensi",
가격:"130만",
start:function(){
alert(this.name " 멋진 시작!");
},
stop:function(){
alert(this.name " 특수 브레이크 중지!");
}
}
bensi.noExtra=function(){
return "누가 감히 세금을 징수하겠습니까? ";
}
var autuo = {
이름:"autuo【하위 카테고리】",
가격: "10,000",
stop:function(){
alert( this. name "알토가 작동하지 않습니다!");
}
}
function ChangAn(){
this.extendf(ChangAn,car)
// this.name = "CHANGAN [하위 클래스]";
this.run=function(){
alert(this.name "조금 느리게 진행 중...");
}
}
var ftest = function (){
var tb = new BMW("BMW","700,000");
testRun(tb)
alert(BMW.noExtra())
}
var ftest2 = function(){
var tb = bensi//("벤츠","120만")
tb.extendf(bensi,car)
testRun(bensi); bensi.noExtra());
}
var ftest3 = function(){
var tb = new ChangAn("장안[패스 매개변수]","50,000")
testRun( tb);
alert(ChangAn.noExtra());
}
var ftest4 = function(){
var tb = autuo
tb.extendf(autuo,car2); >testRun(tb);
alert(autuo.noExtra());
}
var ftest5 = function(){
var tb = autouo
tb.extendf(autuo,bensi) ;
alert(tb.name);
tb.stop()
alert(autuo.noExtra()); = function(){
var tb = new BMW2("BMW 2","650,000");
var Scar = document.getElementById("showcar")
scar.innerHTML = tb .remark( );
alert(tb.name);
tb.stop()
alert(BMW2.noExtra()); /테스트 출력
function testRun(tb){
var Scar = document.getElementById("showcar");
if(!scar) return false
scar.innerHTML = tb. ;
tb.base.start();
tb.base.run()
tb.base .stop( );
tb.stop();
alert(tb.extra("10,000")); //부모 클래스 자체에는
이 없으므로 이는 잘못됩니다. }

js 테스트:
<입력 유형 = "버튼" 값 = "BMW" onclick = "ftest" ()" >

ps: 성능상 문제는 발견되지 않았는데, 모두 개선해 주시길 바랍니다.
한 가지 매개변수만 사용하고 싶은데 방법이 없을까요?
Nested 클래스는 아직 시도해보지 않았습니다.