Summary of usage of inheritance in javascript_javascript skills

The examples in this article summarize the usage of inheritance in JavaScript. Share it with everyone for your reference. The details are as follows:

Example:

Copy code The code is as follows:

/**
* Implement the subclass to inherit the parent class, but will not generate redundant attributes and methods
* @returns {Function}
*/
define(function(){
return function(subType, superType){
var proto = new Object(superType.prototype);
proto.constructor = subType;
subType.prototype = proto;
};
});
//————————————————————————
define(function(){
function ostring(s)
{
this.str = s;
this.length = this.str.length;
}
ostring.prototype.show = function(){
alert(this.str);
};
return ostring;
});
//————————————————————————
define(['inherit', 'ostring'], function(inherit, ostring){
function wstring(s){
//Use call to call the parent class constructor
ostring.call(this, s);
this.chlength = 2 * s.length;
}
//Inherit other attributes
inherit(wstring, ostring);
wstring.prototype.add = function(w)
{
alert(this.str w);
};
return wstring;
});

Look at the example again
1. Use function to implement:

Copy code The code is as follows:

function Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Return this.name;
}
function Author(name, books) {
This.inherit=person;
This.inherit(name);
This.books = books;
 
}
var au=new Author("dororo","Learn much");
au.name

Or equivalent:

Copy code The code is as follows:

function Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Return this.name;
}
function Author(name, books) {
Person.call(this, name);
This.books = books;
 
}
var au=new Author("dororo","Learn much");
au.getName

Since this is just using this as a parameter, calling the constructor of the parent class Person, and assigning all the fields assigned to the parent class to the Author subclass, any defined fields (prototype) other than the parent class Person constructor will not be used by the subclass. will be inherited. So in the above example, au.getName will be undefined because getName is defined in the Person prototype object.

Moreover, the constructor of the subclass must call the constructor of the parent class before defining its own domain, so as to prevent the definition of the subclass from being overwritten by the parent class. In other words, the Author defined attribute book must be after Person.call, otherwise it will be overwritten by the attributes in Person. At the same time, it is best not to use prototype to define the function domain of the subclass in the subclass, because after a subclass is new and instantiated, the prototype must be executed, and then the constructor of the parent class is called, which is also easy to be The attributes of the parent class are overwritten.

2. Use prototype to implement:

Copy code The code is as follows:

function Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Return this.name;
}
function Author(name, books) {
This.books = books;
}
Author.prototype=new Person(name);
Author.prototype.constructor=Author;
Author.prototype.getBooks = function() {
Return this.books;
}
var au1=new Author("dororo1","Learn much");
var au2=new Author("dororo2","Learn less");
alert(au1.getName());
alert(au2.getName());

This method avoids the problem of being unable to inherit prototype in function implementation. Because Author.prototype=new Person(name); new Person() instance will call the Person constructor and all properties of the prototype. But the disadvantage is that Author.prototype has already been instantiated. So when a subclass is instantiated, all non-basic data types are reference copies. So in the above example, the value returned by both instances au1 and au2 is dororo1.

3. Use “mixing” to achieve

Copy code The code is as follows:

function Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Return this.name;
}
function Author(name, books) {
This.base = new Person(name);
for(var key in this.base){
          if(!this[key]){
This[key]=this.base[key];
           }
           }
This.book=books;
}
var au1=new Author("dororo1","work");
var au2=new Author("dororo2","play");
alert(au1.getName());
alert(au2.getName());
au1.book;
au2.book;

It is an extension and copies all fields of the parent class to the child class. There are no problems with the above two aspects at all.
Parasitic combination mode)

JS inheritance includes attribute inheritance and method inheritance, which are implemented through different methods.
1. Inheritance of attributes

Inheritance of attributes is achieved by changing the execution environment of the function. Changing the execution environment of a function can be achieved using the call() and apply() methods.

We first create an Animal "class" (because there is no concept of class in JS, here is just a simulation, it is actually just a Function object).

Copy code The code is as follows:

function Animal(typeName) {
//Add an attribute typeName
to the execution environment (this) of the current method //But the execution environment (this) can only be determined when this function is executed
this.typeName = typeName;
this.colors = ["red","while"];
}
//Want to add two (object-shared) methods to the prototype of the function
Animal.prototype.Shout = function () { alert("I am: --" this.typeName);};
Animal.prototype.Eat = function () { alert("I am: --" this.typeName) };
//--Define a lion--"class" (actually a function)
function Lion(tn) {
//--Execute the Animal method, and modify the execution environment of Animal to Lion's this
through the first parameter of apply //Similarly, Lion’s this can only be determined during execution
Animal.apply(this,["Lion"]);//--Inherited the variable attributes of the parent class, this is new because it is Lion, this is Lion
}
Lion.prototype = Animal.prototype; //Inherit the method of the parent class and get it done--but this is not well written. When the subclass adds a method, the parent class also has this method. This is a pointer reference
Lion.prototype.Hunt = function () {
alert("I am: Lion, I want to hunt~~·~");
}
var aminm = new Animal();
aminm.Hunt(); //---You can access the methods of the subclass, which is not good
//----So how to solve this problem? ? ? ? ? ?
//---Solution: When inheriting methods, you can write like this:
Lion.prototype = new Animal();//Inherit the method of the parent class and assign the Animal object to the prototype prototype. In fact, it also has attributes
var lion = new Lion(); //In addition to creating, the new keyword also modifies the execution environment of the Lion object to the Lion object itself
// ---In other words, after new is completed, this in the Lion function is the Lion function itself, and then the Lion function

is called

Analyze the new keyword:

The new keyword is very great. In the above code, the new keyword has completed the following tasks:
1) Open up heap space to prepare to store Lion objects
2) Modify the execution environment of the Lion object itself so that this of the Lion function points to the Lion function object itself.
3) Call the "constructor" of the Lion "class" to create a Lion object
4) Assign the heap address of the Lion function object to the variable l. At this time, l points to the Lion function object
lion.Shout();
lion.Eat();
But this kind of inheritance has a disadvantage: the constructor of the parent class is called twice, call once, and then new again.

I hope this article will be helpful to everyone’s JavaScript programming design.