JavaScript inheritance in Object-oriented

Basic concepts of 1.1 inheritance

With a subclass that inherits from another parent class, the subclass can automatically have all the properties and methods in the parent class, a process called inheritance.

>>> inherits the two parties, which occur between two classes.

three ways to implement inheritance:

Extend the prototype implementation of object inheritance, use call and apply and bind to implement inheritance, and use prototypes to implement inheritance.

1.2 Extension object prototype implementation inheritance

　　The prototype implementation of the extended object inherits the principle that all the properties and methods of the parent object are assigned to the child class object through the loop. The key point is that the for-in loop, even if the object is not extended, can be manipulated through a simple loop.

specific implementation steps:

① Defining a parent class

function Parent () {}

② Defining a subclass

function Son () {}

③ adds an extension method to the object class by prototype (through the for-in loop, assigns the parent class's properties and methods to the subclass)

function (parent) {    for (var . parent) {          this [i] = parent[i];}    }

④ gets the parent class object, and the subclass object, respectively.

var New Person (); var New Student ();

⑤ using subclass objects, calling extension methods, implementing inheritance operations

S.extend (P);

The complete code is as follows:

//1. Defining the Parent class        functionPerson (name,age) { This. Name =name;  This. Age =Age ;  This. Say =function() {alert ( This. name+ ":" + This. Age); }        }        //2. Defining subclasses        functionStudent (NO) { This. No =No;  This. Add =function(A, b) {alert (a+b); }        }        functionProgrammer (lang) { This. lang =Lang;  This. codding =function() {alert ("I was reading!" "); }        }        //3. Use the prototype to add an extension method to the object. Object.prototype.customExtend =function(parobj) { for(varIinchparobj) {                 //assign to yourself all the property methods of the parent class through the for-in loop.                    This[I] =Parobj[i]; }        }                varp =NewPerson ("Zhang San", "18"); vars =NewStudent ("0001"); S.customextend (p);//now S inherits all the properties and methods of P. 

Full Code

The prototype implementation of the extended object implements the inheritance disadvantage:

① cannot get the complete subclass object directly by instantiating it once. and need to get the parent class object and subclass object two objects, and then manually merge;

The ② extension object inherits the method, and it is also persisted on the subclass object.

1.3 inheritance through prototypes

　　The principle of inheriting through the prototype is to assign the parent class object to the prototype of the subclass, and then the properties and methods of the parent object will appear in the prototype of the child class. Then, when the subclass is instantiated, the prototype of the subclass will go to the __proto__ of the subclass object, and finally, the properties and methods of the parent object will appear in the __proto__ object of the child class object.

Specific implementation steps:

① Defining a parent class

function Parent () {}

② Defining a subclass

function Student () {}

③ assigns the parent class object to the prototype of the child class

New Person ();

④ Gets the child class object, it adds all the properties and methods of the parent object to the __proto__

var New Son ()

The complete code is as follows:

functionPerson (name,age) { This. Name =name; This. Age =Age ; This. Say =function() {alert ("I call:" + This. name+ "; this year:" + This. age+ "Years old");}}functionStudent (NO) { This. No =No;} Student.prototype=NewPerson ("JH", 14);//subclass prototype pointing to the parent class objectvarStu =NewStudent (12); Stu.say ();//after inheriting, the subclass obtains all the property methods of the parent class

Full Code

The features of inheritance are realized through prototypes:

All properties of the ① subclass itself are member properties, and the attributes inherited by the parent class are prototype properties.

② still cannot instantiate the completed subclass object in one step.

1.4 using call and apply and bind for inheritance

Use call and apply and bind to achieve the effect and difference of inheritance:

1, three functions: Call these three functions by the function name, you can forcibly assign this to an object in the function

2, three functions of the Writing (difference): (Face question love ask)

Call:func.call (The This point of the func obj,func parameter 1,func parameter 2, ...);

Apply:func.call (The This point of the func obj,[func parameter 1,func parameter 2, ...]);

Bind:func.call (The This of the Func pointer to obj) (func parameter 1,func parameter 2, ...);

The only difference between 3 and three functions is that they accept the Func parameter list in different ways, except that there is no difference in functionality!

Specific implementation steps:

① Defining a parent class

Funtion Parent () {}

When ② defines a subclass, it uses three functions in the subclass, calls the parent class, and the this of the parent class function, points to the this of the subclass function

function Son (no,name) {
this.no = no;
Person.call (This,name);
}

③ the parent class property is automatically inherited when the child class is instantiated

var New Son ("Zhangsan");

The complete code is as follows:

functionPerson (name,age) { This. Name =name;  This. Age =Age ;  This. Say =function() {alert ("I call:" + This. name+ "; this year:" + This. age+ "Years old"); }        }                functionStudent (no,stuname,stuage) { This. No =No; Person.call ( This, Stuname,stuage); //executing the above code is equivalent to replacing all this of the person class with the student class this            //In other words, all the properties and methods of the person class are given to the student class        }                varStu =NewStudent ("Zhangsan", 14); Stu.say ();//subclass inherits the parent class say method

Full Code

All right! Let's share this with you today. JavaScript inheritance in Object-oriented ~ ~ If there is any doubt, welcome a lot of messages ~ ~

JavaScript inheritance in Object-oriented