javascript's usage summary for inheritance

This example summarizes the usage of javascript with respect to inheritance. Share with you for your reference. The details are as follows:

Example:

/**

*  Implement the subclass to inherit from the parent class , But no redundant properties or methods are generated 

* @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){

// with call The implementation calls the superclass constructor 

ostring.call(this, s);

this.chlength = 2 * s.length;

}

// Inherits other properties 

inherit(wstring, ostring);

wstring.prototype.add = function(w)

{

alert(this.str + w);

};

return wstring;

});

See example again
1. Implement with function:

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 equally authentic:

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 simply takes this as an argument and calls the constructor of the parent class Person, assigning all fields assigned to the parent class to the Author subclass, any fields defined outside the parent class Person constructor (prototype prototype) are not inherited by the child class. So in the above example, au.getName will be undefined (undefined) because getName is defined in the Person prototype object.

Also, the constructor of the subclass calls the superclass constructor before defining its own domain, so that the definition of the subclass is not overridden by the superclass. That is, Author defines book after Person.call, otherwise it will be overwritten by Person properties. At the same time, it is better not to use prototype in the subclass to define the function field of the subclass, because after one subclass is instantiated by new, prototype will be executed, and then the constructor of the parent class will be called, which is also easy to be overwritten by the attributes of the parent class.

2. Implement with prototype:

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 approach avoids the problem of prototype not being able to inherit from an function implementation. Because Author. prototype = new Person (name); The new Person () instance invokes all attributes of the Person construct and stereotype. But the disadvantage is that Author.prototype has been instantiated. So when subclasses are instantiated, all non-primitive data types are reference copy. So in the above example, both instances au1 and au2 return values of dororo1.

3. Implemented as a "hybrid"

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;

 
An extension that copies all fields of the parent class to the child class. There is no question of either.
Parasitic combination mode)

Inheritance of JS includes inheritance of attributes and inheritance of methods, which are implemented by different methods.
1. Inheritance of properties

Property inheritance is achieved by changing the execution environment of the function. Changing the execution environment of a function can be done using call() and apply().

We first create an Animal "class" (since there is no concept of a class in JS, this is just a mock, which is really just an Function function object).

function Animal(typeName) {

// Is the execution environment for the current method (this) add 1 A property typeName

// But the execution environment (this) Only when this function is executed 

this.typeName = typeName;

this.colors = ["red","while"];

}

// Think about the prototype of the function   add   Two (object Shared) methods 

Animal.prototype.Shout = function () { alert(" I am a: --" + this.typeName);};

Animal.prototype.Eat = function () { alert(" I am a: --" + this.typeName) };

//-- define 1 A lion -- class 1 A function) 

function Lion(tn) {

//-- perform Animal Method and pass apply The first 1 A parameter   To modify the Animal The execution environment is Lion the this

// In the same way, Lion the this , and only at the time of execution 

Animal.apply(this,[" The lion "]);//-- Inherited the variable properties of the parent class, this Because it is new the Lion . this is Lion

}

Lion.prototype = Animal.prototype; // Inherited methods from parent classes, done -- But that's not good, because when a subclass adds a method, the parent class also has that method, so that's a pointer reference 

Lion.prototype.Hunt = function () {

alert(" I'm: lion. I'm going hunting ~~ ・ ~");

}

var aminm = new Animal();

aminm.Hunt(); //--- You can access methods in subclasses, which is bad 

//---- So how to solve this problem?? 

//--- Solution: when inheriting a method, write: 

Lion.prototype = new Animal();// Inherited superclass methods, put Animal Object is assigned to prototype The prototype, it actually has properties in it 

var lion = new Lion(); //new  Keywords are created and changed Lion The execution environment of the object is Lion The object itself 

// --- In other words, yes new And when we're done, Lion In the function this is Lion The function itself is called Lion function 

analysis 1 under new keyword:

The new keyword is 10 points great. In the previous code, the new keyword did the following:
1) open up heap space to prepare to store Lion objects
2) modify the execution environment of Lion object itself, so that this of Lion function points to Lion function object itself.
3) call "constructor" of Lion "class" to create Lion object
4) assign the heap address of Lion function object to the variable l, and then l points to the Lion function object
lion.Shout();
lion.Eat();
But there is a drawback to this inheritance: the constructor of the parent class is called twice, call1, and new again.

I hope this article has been helpful to your javascript programming.