Before learning about JavaScript inheritance in depth, first understand the following concepts:
Parent class: the inherited class
Subclass: the inherited class
Super class: that is, the parent class
Abstract Class: A class that is generally not used for instantiation. Its purpose is to inherit from other classes.
Base class: a class that other classes can inherit from
Derived class: a class that is inherited from the base class
Javascript object inheritance usually has the following 5 methods:
1. Object impersonation
2. call() method
3.apply() method
4.Prototype chain
5. Mixed method
A. Object impersonation
The so-called object impersonation is that a new class impersonates an old class (the old class must use the constructor method) to achieve the purpose of inheritance.
eg .1
function people(name,sex,age){ //Use the constructor method
this.name=name;
this.sex=sex;
this.age=age;
this.say=function(){
alert(" My name is " this.name);
};
this.doing=function(){
alert("I am speaking");
};
}
var Marry=new people("Marry","Woman","23");
Marry.say();
Marry.doing();
function white_people(name, sex,age){
this.inherit=people;
this.inherit(name,sex,age);
delete this.inherit;
this.area=function(){
alert("I am in Europe");
}
}
var Tom=new white_people("Tom","man","21");
Tom.say( );
Tom.area();
alert(Tom.age);
In the above example, people is used as the base class of white_people. Remember that the format is
this.inherit=people, used for object impersonation to achieve inheritance; //Pretend
this.inherit(name,sex,age); //Inherit
delete this.inherit; //Delete inheritance
All new attributes and new methods must be deleted after inheritance, in order to avoid overwriting the related attributes and methods of the parent class.
In addition, object impersonation supports multiple inheritance.
eg.2
function worker(pay,work){
this.pay= pay;
this.work=work;
}
function city_worker(name,sex,age,pay,work){
this.inherit=people;
this.inherit(name, sex,age);
delete this.inherit;
this.inherit=worker;
this.inherit(pay,work);
delete this.inherit;
}
var Jerry=new city_worker("Jerry","man","21","$1000","coder");
Jerry.say();
alert(Jerry.work) ;
Object impersonation has a shortcoming: when the multiple inheritance mechanism is implemented, if the base class has the same attributes or methods, it will be inherited from the subsequent class.
B.call The () method
is just a function impersonated by the encapsulated object. In this way, we no longer need to write the "classic" three sentences, but replace it with the following sentence:
Base class.call(object, parameters List)
eg.1
function farmer(name ,sex,age,pay,work){
people.call(this,name,sex,age);
worker.call(this,pay,work);
}
var Nicholas=new farmer("Nicholas","man","27","$3000","irrigator");
Nicholas.say();
alert(Nicholas.pay);
Similarly, call() has a small problem with properties and methods with the same name.
C.apply() method
The same as call(). apply() is also a wrapper function for object impersonation .The format is:
base class.apply(object, parameter array);
eg.1
function white_collar(name,sex,age,pay,work){
people.apply(this,new Array(name,sex,age));
worker.apply(this,[pay,work]);
}
var Jiessie=new white_collar("Jiessie","woman","26","$2500","editor");
Jiessie.say();
alert(Jiessie.work);
Similarly, apply() has a small problem with properties and methods with the same name.
D. Prototype chain
The above three methods all use inheritance in the form of constructors. Correspondingly, there is also inheritance in the form of prototype functions: prototype chain.
eg.1
function blue_collar(){
}
blue_collar.prototype.name="Jean";
blue_collar.prototype.age="33";
blue_collar.prototype.say=function(){
alert("my name is " this.name);
};
function city_blue_collar(){
}
city_blue_collar.prototype=new blue_collar();
var jj=new city_blue_collar;
jj.say();
프로토타입 체인에는 매개변수를 전달할 수 없다는 단점도 있습니다. 또한
E.Mixed 메서드
는 생성자 메서드를 사용하기 때문에 다중 상속을 지원하지 않습니다. 클래스의 속성을 작성하려면 속성 상속을 위해 call() 또는 apply()를 사용
프로토타입 메소드를 사용하여 메소드 작성, 메소드 상속을 위해 프로토타입 체인 사용
eg.1
function beauty(이름,나이){
this.name =name;
this.age=age;
}
beauty.prototype.say=function(){
alert("어린 소녀의 이름" this.name)
function china_beauty(이름,나이,지역){
beauty.call(this,name,age);
this.area=area;
}
china_beauty.prototype=new beauty();
china_beauty.prototype.from= function(){
alert("나는 출신입니다" this.area)
}; var diaochan=new china_beauty(" Diao Chan","16","Lintao");
diaochan.say();
diaochan.from();
alert(diaochan.age);