Javascript inheritance mechanism (detailed answers, graphic tutorial)

JavaScript inheritance is carefully divided into many types and implementation methods in many books. There are generally two types: object impersonation and prototype method. These two methods have their own advantages and disadvantages. I will list them here first, and then analyze the differences from the bottom level

After learning the creation of Javascript classes and objects, now I will summarize the implementation of the Javascript inheritance mechanism. Javascript does not have a strict and clear definition of the inheritance mechanism like Java. Its implementation is very loose just like the way its variables are used. You can design your own method to "imitate" the implementation of the inheritance mechanism. There are several methods:

1. Object impersonation

The code block defined by function is equivalent to a class. You can use It has the this keyword. You can use this to add properties and methods to it. There are the following two sentences in the above code:

this.newMethod1=classA;
this.newMethod1(str);

The newMethod1 variable is defined in classB. It is a reference, points to classA, and also calls classA. The function of these two lines of code is equivalent to directly copying the contents of the classA code block here. The classB created in this way Of course the object has the properties and methods of classA. Object impersonation can also achieve multiple inheritance, as follows:

function ClassZ() { this.newMethod = ClassX; this.newMethod(); delete this.newMethod; this.newMethod = ClassY; this.newMethod(); delete this.newMethod; }

However, classY will overwrite the properties and methods of the same name in classX. If the design is OK, classz will also Different classes with the same properties and methods should not be inherited.

2. Use the call() method

The first parameter in the call() method passes an object, where this refers to is the current object, and the following parameters (there may be multiple) refer to the parameters required to be passed to the class (function) that calls the call() method. classA.call() is also equivalent to directly copying the content in the classA code block. At this point, objects of classB can also directly use variables and methods in classB.

3. Prototype chain

The prototype keyword is used to define the class here. There are no parameters when defining the function, followed by prototype. The variables or methods are equivalent to the properties and methods modified by static in Java, which belong to all objects. There is a special feature here: cB.prototype=new cA(); This sentence is equivalent to copying the content of the cA object to cB, cB can also add its own properties and methods.

4. Mixed method

Here you can encapsulate the attributes in the class body, and the method is defined using the prototype method. Personally, this is A good design method is to use functions defined by prototype to reuse multiple objects. Two points need to be noted here: there is cA.call(this,name) in the cB class body; at the same time, the cB prototype must be assigned to the cB object, that is :cB.prototype=new cA();cA.call(this,name) is also equivalent to copying the code in the cA class block here. The following sentence adds the method of cA to cB, and cB can also append itself. properties and methods.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed example of interaction between Servlet3.0 and JS through Ajax

##Native JS encapsulation fade effect function Detailed explanation of steps

p5.jsSummary of keyboard interaction functions

The above is the detailed content of Javascript inheritance mechanism (detailed answers, graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!