Home > Web Front-end > JS Tutorial > javascript inheritance implementation method_javascript skills

javascript inheritance implementation method_javascript skills

WBOY
Release: 2016-05-16 18:47:48
Original
917 people have browsed it

Below I give several commonly used methods:
1. Object impersonation
Principle: The constructor uses the this keyword to assign values ​​to all properties and methods. Because the constructor is just a function, it can Make the constructor of ClassA a method of classB, and then call it. In this way, classB will receive the properties and methods defined in the constructor of classA. Example:

Copy code The code is as follows:

function classA(name)
{
this.name=name;
this.showName=function(){ alert(this.name);}
}
function classB(name)
{
this.newMethod = classA;
this.newMethod(name);
}
obj = new classA("hero");
objB = new classB("dby");
obj.showName(); // print hero
objB.showName(); // print dby Description classB inherits the methods of classA.

Object impersonation can implement multiple inheritance. For example,
Copy code Code As follows:

function classz(){
this.newMethod = classX;
this.newMethod();
delete this.newMethod;
this.newMethod=classY ;
this.newMethod():
delete this.newMethod;
}

But if classX and classY have the same properties or methods, classY has high priority.
2.call() method
The call method is similar to the classic object impersonation method. Its first parameter is used as the object of this, and other parameters are passed directly to the function. Self.
Copy code The code is as follows:

function sayName(perfix)
{
alert(perfix this.name);
}
obj= new Object();
obj.name="hero";
sayName.call(obj,"hello," );
function classA(name)
{
this.name=name;
this.showName=function(){alert(this.name);};
}
function classB (name)
{
classA.call(this,name);
}
objB = new classB("bing");
objB.showName();////Description classB inherits the showName method of classA

3.apply() method
The apply() method has 2 parameters, one is used as this object, and the other is passed to the function Array of parameters.
Copy code The code is as follows:

function sayName(perfix)
{
alert(perfix this.name);
}
obj= new Object();
obj.name="hero";
sayName.aplly(obj,new Array(" hello,") );

4. Prototype chain
Any properties and methods of the prototype object will be passed to all instances of the corresponding class. The prototype chain is used
Copy code The code is as follows:

function classA (){}
classA.prototype.name="hero";
classA.prototype.showName=function(){alert(this.name)}
function classB(){}
classB.prototype=new classA();
objb = new classB()
objb.showName();//print hero indicates that b inherits the method of a

Here you need to pay attention to calling the constructor of classA When, no parameters are passed to it, this is the standard practice of the prototype chain, ensuring that the constructor of the function does not have any parameters.
And all properties and methods of the subclass must appear after the prototype attribute is assigned, and should be in it The previously assigned value will be deleted. Because the prototype attribute of the object is replaced with a new object, the original object with new methods added will be destroyed.

5 The mixing method
is Use impersonation to define constructor properties and prototype methods to define object methods.
Copy code The code is as follows:

function classA(name)
{
this.name=name;
}
classA.prototype.showName=function(){alert(this.name)}
function classB (name)
{
classA.call(this,name);
}
classB.prototype = new classA();
classB.prototype.showName1=function(){alert( this.name "*****");};
obj = new classB("hero");
obj.showName();
obj.showName1();

In the constructor of classB, inherit the name attribute in classA by calling the call method, and use the prototype chain to inherit the showName method of classA.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template