Detailed description of inheritance methods in JavaScript, and detailed description of javascript

Detailed description of inheritance methods in JavaScript, and detailed description of javascript

Concept of js inheritance

The following two inheritance methods are commonly used in js:

Prototype chain inheritance (inheritance between objects)
Class inheritance (inheritance between constructors)
Javascript is not as object-oriented as java does. js is object-based and has no class concept. Therefore, to implement inheritance, you can use the prototype mechanism of js or the apply and call methods.

In the object-oriented language, we use classes to create a custom object. However, if everything in js is an object, how can we create a custom object? This requires the js prototype:

We can simply regard prototype as a template, and the newly created custom object is a copy of this template (prototype) (actually not a copy but a link, but this link is invisible, the new instantiated object contains an invisible _ Proto _ pointer pointing to the prototype object ).

Js can simulate and implement the class functions through constructor and prototype. In addition, the implementation of js class inheritance relies on the prototype chain.

Original Type inheritance and class inheritance

Class Inheritance refers to calling a super-Type constructor within a sub-Type constructor.
Strict Class inheritance is not very common and is generally used in combination:
Copy codeThe Code is as follows:
Function Super (){
This. colors = ["red", "blue"];
}

Function Sub (){
Super. call (this );
}

The original type inheritance creates a new object with an existing object, and points the prototype of the subclass to the parent class, which is equivalent to adding the prototype chain of the parent class.

Prototype chain inheritance

To make the subclass inherit the attributes of the parent class (including methods), you must first define a constructor. Then, assign the new instance of the parent class to the prototype of the constructor. The Code is as follows:
Copy codeThe Code is as follows:
<Script>
Function Parent (){
This. name = 'Mike ';
}

Function Child (){
This. age = 12;
}
Child. prototype = new Parent (); // Child inherits Parent, forming a chain through prototype

Var test = new Child ();
Alert (test. age );
Alert (test. name); // get the inherited attribute
// Continue prototype chain inheritance
Function Brother () {// brother Construction
This. weight = 60;
}
Brother. prototype = new Child (); // continue prototype chain inheritance
Var brother = new Brother ();
Alert (brother. name); // inherits Parent and Child.
Alert (brother. age); // 12
</Script>

The inheritance of the prototype chain is still lacking, that is, the Object. All constructors inherit from the Object. The inheritance Object is automatically completed and does not need to be manually inherited. What is their subordination?

Determine the relationship between the prototype and the instance

You can determine the relationship between the prototype and the instance in two ways. Methods of the instanceof and isPrototypeof () operators:
Copy codeThe Code is as follows:
Alert (brother instanceof Object) // true
Alert (test instanceof Brother); // false, test is the super class of brother
Alert (brother instanceof Child); // true
Alert (brother instanceof Parent); // true

Any prototype that has appeared in the prototype chain can be said to be the prototype of the Instance derived from the prototype chain. Therefore, the isPrototypeof () method returns true.

In js, the inherited function is called a super type (parent class, the base class is also a row), and the inherited function is called a child type (subclass, derived class ). There are two main problems with prototype inheritance:
First, the literal rewriting prototype will interrupt the relationship, use the prototype of the reference type, and the child type cannot pass parameters to the super type.

The pseudo-class solves the problem of reference sharing and super-type parameter passing. We can use the "borrow Constructor" technology.

Borrow Constructors (class inheritance)
Copy codeThe Code is as follows:
<Script>
Function Parent (age ){
This. name = ['Mike ', 'jack', 'Smith'];
This. age = age;
}

Function Child (age ){
Parent. call (this, age );
}
Var test = new Child (21 );
Alert (test. age); // 21
Alert (test. name); // mike, jack, smith
Test. name. push ('bill ');
Alert (test. name); // mike, jack, smith, bill
</Script>

Although the borrow constructor solves the two problems just now, if there is no prototype, there is no way to reuse it. Therefore, we need the prototype chain + borrow constructor mode. This mode is called combination inheritance.

Combination inheritance
Copy codeThe Code is as follows:
<Script>
Function Parent (age ){
This. name = ['Mike ', 'jack', 'Smith'];
This. age = age;
}
Parent. prototype. run = function (){
Return this. name + 'are both '+ this. age;
};
Function Child (age ){
Parent. call (this, age); // impersonate an object and PASS Parameters of the super type
}
Child. prototype = new Parent (); // prototype chain inheritance
Var test = new Child (21); // write new Parent (21 ).
Alert (test. run (); // mike, jack, smith are both21
</Script>

Combined inheritance is a common inheritance method. The idea behind it is to use prototype chain to inherit prototype attributes and methods, the constructor is used to inherit instance attributes. In this way, function reuse is realized by defining the method on the prototype, and each instance has its own attributes.

Call (): call a method of an object to replace the current object with another object.
Copy codeThe Code is as follows:
Call ([thisObj [, arg1 [, arg2 [, [,. argN])

Original Type inheritance

This inheritance creates a new object based on an existing object with the help of the prototype, and does not need to create a custom type. It is called the original type inheritance.

Copy codeThe Code is as follows:
<Script>
Function obj (o ){
Function F (){}
F. prototype = o;
Return new F ();
}
Var box = {
Name: 'trigger4 ',
Arr: ['Brother ', 'sister', 'baba']
};
Var b1 = obj (box );
Alert (b1.name); // trigkit4

B1.name = 'Mike ';
Alert (b1.name); // mike

Alert (b1.arr); // brother, sister, baba
B1.arr. push ('Parents ');
Alert (b1.arr); // brother, sister, baba, parents

Var b2 = obj (box );
Alert (b2.name); // trigkit4
Alert (b2.arr); // brother, sister, baba, parents
</Script>

The original type inheritance first creates a temporary constructor In the obj () function, then uses the input object as the prototype of the constructor, and finally returns a new instance of this temporary type.

Parasitic inheritance

This inheritance method combines the original type with the factory mode to encapsulate the creation process.
Copy codeThe Code is as follows:
<Script>
Function create (o ){
Var f = obj (o );
F. run = function (){
Return this. arr; // share the reference.
};
Return f;
}
</Script>

Small issues of combined inheritance

Combined inheritance is the most commonly used inheritance mode in js, but the super type of the combination inheritance is called twice during use; one is when the child type is created, the other is inside the subtype constructor.
Copy codeThe Code is as follows:
<Script>
Function Parent (name ){
This. name = name;
This. arr = ['Elder Brother', 'sister', 'parage'];
}

Parent. prototype. run = function (){
Return this. name;
};

Function Child (name, age ){
Parent. call (this, age); // The second call
This. age = age;
}

Child. prototype = new Parent (); // The first call
</Script>

The above code is the original combination inheritance, so the parasitic combination inheritance solves the problem of two calls.

Parasitic combined inheritance

Copy codeThe Code is as follows:
<Script>
Function obj (o ){
Function F (){}
F. prototype = o;
Return new F ();
}
Function create (parent, test ){
Var f = obj (parent. prototype); // create an object
F. constructor = test; // enhancement object
}

Function Parent (name ){
This. name = name;
This. arr = ['Brother ', 'sister', 'Parents'];
}

Parent. prototype. run = function (){
Return this. name;
};

Function Child (name, age ){
Parent. call (this, name );
This. age = age;
}

InheritPrototype (Parent, Child); // implement inheritance here

Var test = new Child ('trigger4', 21 );
Test. arr. push ('nephew ');
Alert (test. arr );//
Alert (test. run (); // only the method is shared.

Var test2 = new Child ('jack', 22 );
Alert (test2.arr); // reference the problem to solve
</Script>

Call and apply

The global functions apply and call can be used to change the point of this in the function, as follows:
Copy codeThe Code is as follows:
// Define a global function
Function foo (){
Console. log (this. fruit );
}

// Define a global variable
Var fruit = "apple ";
// Customize an object
Var pack = {
Fruit: "orange"
};

// Equivalent to window. foo ();
Foo. apply (window); // "apple", this equals to window
// This = pack in foo
Foo. apply (pack); // "orange"