js 계승 실현 방법 상세

본고는 js 계승 실현 방법을 실례로 서술하였다.다음과 같이 여러분에게 참고할 수 있도록 공유합니다.

var animal=function(name){ // 
  this.name=name;
  this.sayhello=function(){
  alert("hi "+this.name);
  };
}
animal.prototype.shout=function(){ //prototype : 
  alert(this.name+" ！");
};
animal.prototype.game=function(){
  alert(this.name+" ！");
};
var dog=new animal(" ");  // 
dog.sayhello();
dog.shout();
dog.game();

1. 원형 계승

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi "+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+" ！");
};
animal.prototype.game=function(){
  alert(this.name+" ！");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){   // 
  alert(this.name+" ！");
  }
}
Dog.prototype=Cat.prototype=new animal();
var dog=new Dog(" ");
dog.sayhello();
dog.shout();
dog.game();
var cat=new Cat(" ");
cat.sayhello();
cat.shout();
cat.game();

animal은 부류(또는 초류), 누구에게 계승할 것인가, 누가 부류(초류)
개선: 계승을 위한 함수 전문 쓰기

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi "+this.name);
  };
}
Function.prototype.extends=function(superclass){      //extends ， ， var extends=function(){}， 
  this.prototype=new superclass();
};
animal.prototype.shout=function(){
  alert(this.name+" ！");
};
animal.prototype.game=function(){
  alert(this.name+" ！");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){
  alert(this.name+" ！");
  }
}
Dog.extends(animal);
var dog=new Dog(" ");
dog.sayhello();
dog.shout();
dog.game();
var dog=new Dog(" ");
dog.sayhello();
dog.shout();
dog.game();

2,call,apply 계승 (불완전 계승)

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi "+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+" ！");
};
animal.prototype.game=function(){
  alert(this.name+" ！");
};
var Dog=function(name){
  animal.call(this,name);
}
var dog=new Dog(" ");
dog.sayhello();
dog.shout();
dog.game();

출력:hi 나는 까만색
TypeError: dog.shout is not a function
콜 (apply) 방식을 통해this 지향만 바꿀 수 있습니다. 프로토타입을 통해 추가하는 방법은 직접 계승할 수 없습니다.
요약:call,apply 이런 방식의 계승은 프로토타입이 없는 클래스나 프로토타입이 추가한 속성이나 함수를 계승할 필요가 없는 클래스에 적용된다. 왜냐하면call과apply 함수는 방법의 교체를 실현했을 뿐 대상의 속성과 함수를 복사하지 않았기 때문이다.
원형 계승은 모든 속성과 함수를 계승할 수 있다
상속된 속성, 기존 속성을 삭제해야 상속된 속성이 출력됩니다.
자바스크립트에 관한 더 많은 내용은 본 사이트의 주제를 볼 수 있습니다. 자바스크립트 대상 입문 강좌, 자바스크립트 중 json 조작 기교 총결, 자바스크립트 전환 효과와 기교 총결, 자바스크립트 검색 알고리즘 기교 총결, 자바스크립트 오류와 디버깅 기교 총결, 자바스크립트 데이터 구조와 알고리즘 기교 총결,《JavaScript 역행 알고리즘과 기교 총결》과 《JavaScript 수학 연산 용법 총결》.
본 논문이 여러분의 JavaScript 프로그램 설계에 도움이 되기를 바랍니다.