This article summarizes the usage of javascript on inheritance. Share it for your reference. The details are as follows:
example:
Copy the code as follows:/**
* Implementation subclasses inherit the parent class, but do not generate unnecessary properties 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 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 the code 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 the code 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 taking this as a parameter, calling the constructor of the parent class Person and assigning all domains assigned to the parent class to the Author subclass, any domains defined outside the parent class Person constructor will not be inherited. So in the above example, au.getName will not be defined (undefined) because getName is defined in Person's prototype object.
Moreover, the constructor of a subclass must call the parent class constructor before defining its own domain, so as not to overwrite the definition of the subclass by the parent class. In other words, the Author defines the property book after Person.call, otherwise it will be overwritten by the property in Person. At the same time, it is best not to use prototype to define the function domain of the subclass in subclasses, because after a subclass is new and instantiated, prototype must be executed, and then the constructor of the parent class is called, which is also easy to be overwritten by the parent class attributes.
2. Use prototype to implement:
Copy the code 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 that the prototype cannot be inherited in function implementation. Because Author.prototype=new Person(name);new Person() instance will call all properties of Person construct and prototype. But the disadvantage is that Author.prototype has been instantiated. So when subclasses are instantiated, all non-base data types are reference copies. So in the above example, the value returned by example au1 or au2 is dororo1.
3. Use "hybrid" to achieve
Copy the code 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 belongs to an extension, copy all domains of the parent class to a subclass. There are no problems in the above two aspects at all.
Parasitic combination mode)
JS inheritance includes inheritance of attributes and inheritance of methods, which are implemented through different methods.
1. Inheritance of attributes
The inheritance of attributes is achieved by changing the execution environment of the function. The execution environment of changing the function can be implemented using two methods: call() and apply().
We first create an Animal "class" (because there is no concept of a class in JS, here is just a mock, it is actually just a Function function object).
Copy the code as follows: function Animal(typeName) {
//Add a property typeName for the execution environment of the current method (this)
//But the execution environment (this) must be executed before it can be determined
this.typeName = typeName;
this.colors = ["red","while"];
}
//I 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 Animal execution environment to this Lion through the first parameter of apply
//Similarly, Lion's this must be executed to determine who it is
Animal.apply(this,["Lion"]);//--Inherits the variable attributes of the parent class, this is because it is new Lion, this is Lion
}
Lion.prototype = Animal.prototype; //Inherit the parent class method and get it done-but this is not well written. When the child class 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 subclass method, which is not good
//---- So how to solve this problem? ? ? ? ? ?
//---Solution: You can write this when inheriting the method:
Lion.prototype = new Animal();//Inherit the parent class method and assign the Animal object to the prototype prototype. In fact, it also has attributes in it.
var lion = new Lion(); //In addition to creating the new keyword, it will also modify the execution environment of the Lion object to the Lion object itself
// ---In other words, after new is finished, this in the Lion function is the Lion function itself, and then the Lion function is called
Analyze the new keywords:
The new keyword is very great. In the previous code, the new keyword completes 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 Lion "class" and create a Lion object
4) Assign the heap address of the Lion function object to the variable l, and at this time l points to the Lion function object
lion.Shout();
lion.Eat();
However, this 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.