A detailed description of how JavaScript inherits

The concept of JS inheritance

JS commonly used in the following two ways to inherit:

Prototype chain inheritance (inheritance between objects) class inheritance (inheritance between constructors)

Since JS is not really an object-oriented language like Java, JS is Object-based and has no concept of class. Therefore, in order to achieve inheritance, you can use the JS prototype prototype mechanism or use the Apply and call method to achieve

In object-oriented languages, we use classes to create a custom object. However, all things in JS are objects, so what is the way to create a custom object? This will require the use of JS prototype:

We can simply think of prototype as a template, the newly created custom object is a copy of the template (prototype) (actually not a copy but a link, but this link is not visible, the newly instantiated object inside there is an invisible __proto__ pointer, Point to the prototype object).

JS can simulate the implementation of the function of the class by means of constructors and prototypes. In addition, the implementation of JS-class inheritance is also based on the prototype chain.

Prototype inheritance and class-style inheritance

A class-type inheritance is a constructor that calls a super-type inside a subtype constructor.

Strict class-type inheritance is not very common, and is generally combined with:

function Super () {

this.colors=["Red", "Blue"];

}

function Sub () {

Super.call (this);

}

Prototype inheritance is the creation of new objects with existing objects, and the prototype of the subclass to the parent class, which is equivalent to joining the parent class as the prototype chain

Prototype chain inheritance

In order for subclasses to inherit the attributes of the parent class (also including methods), you first need to define a constructor. The new instance of the parent class is then assigned to the constructor's prototype. The code is as follows:

<script>

function Parent () {

THIS.name = ' Mike ';

}

function Child () {

This.age = 12;

}

Child.prototype = new parent ();//child inherits the parent, through the prototype, forms the chain

var test = new Child ();

alert (test.age);

alert (test.name);//Get inherited properties

Continuation of the prototype chain inheritance

function Brother () {//brother construction

This.weight = 60;

}

Brother.prototype = new Child ();//continuation of prototype chain inheritance

var brother = new brother ();

alert (brother.name);//inherits the parent and child, pops up Mike

alert (brother.age);//Popup 12

</script>

The above prototype chain inheritance is also missing a link, that is, object, all constructors are inherited from object. And inheriting object is automatic, do not need our own manual inheritance, then what is their affiliation?

Determining the relationship between prototypes and instances

There are two ways to determine the relationship between a prototype and an instance. operator instanceof and isPrototypeOf () methods:

Alert (brother instanceof Object)//true

Alert (test instanceof brother);//false,test is Brother's Super class

Alert (brother instanceof Child);//true

Alert (brother instanceof Parent);//true

The isPrototypeOf () method also returns true as long as the prototype in the prototype chain is a prototype of an instance derived from the prototype chain.

In JS, the inherited function is called the supertype (the parent class, the base class also rows), and the inherited function is called the subtype (subclass, derived class). The use of prototype inheritance is primarily composed of two questions:

The first is that the literal rewrite prototype breaks the relationship, uses the prototype of the reference type, and the subtype cannot pass the parameter to the super type.

Pseudo-class solves the problem that reference sharing and super type cannot be referenced, we can use "borrow constructor" technique

Borrowing constructors (class-type Inheritance)

<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 use of constructors solves just two kinds of problems, but there is no prototype, then reuse is impossible to talk about, so we need the prototype chain + borrowing constructor mode, this pattern is called combinatorial inheritance

Combining inheritance

<script>

function Parent (age) {

THIS.name = [' Mike ', ' Jack ', ' Smith '];

This.age = age;

}

Parent.prototype.run = function () {

Return THIS.name + ' is both ' + this.age;

};

function Child (age) {

Parent.call (This,age);

}

Child.prototype = new Parent ();

var test = new Parent (21);//write New Child (21) also OK

Alert (Test.run ());//mike,jack,smith is both21

</script>

Combined inheritance is a common method of inheritance, and the idea behind it is to use the prototype chain to inherit the prototype properties and methods, and to implement the inheritance of the instance attributes by borrowing the constructor function. This enables the reuse of functions both by defining methods on the prototype and ensuring that each instance has its own properties

Prototype inheritance

This inheritance is called prototype inheritance by prototyping and creating new objects based on existing objects without having to create custom types.

<script>

function obj (o) {

function F () {}

F.prototype = O;

return new F ();

}

var box = {

Name: ' Trigkit4 ',

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>

Prototype inheritance first creates a temporary constructor inside the obj () function, then takes the incoming object as a prototype of the constructor, and finally returns a new instance of the temporary type.

Parasitic inheritance

This inheritance is done by combining the prototype + factory model to encapsulate the process of creation.

<script>

function Create (o) {

var f= obj (o);

F.run = function () {

Return this.arr;//Similarly, a reference is shared

};

return F;

}

</script>

Small problems with combined inheritance

Combined inheritance is the most commonly used inheritance mode for JS, but the combination of inherited super types is called two times during the use process, once the subtype is created, and the other is inside the subtype constructor.

<script>

function Parent (name) {

THIS.name = name;

This.arr = [' elder brother ', ' sister ', ' parents '];

}

Parent.prototype.run = function () {

return this.name;

};

function Child (name,age) {

Parent.call (this,age);//Second Call

This.age = age;

}

Child.prototype = new Parent ();//First Call

</script>

The above code is the previous combination of inheritance, then the parasitic combination inheritance, resolved the problem of two calls.

Parasitic combined inheritance

<script>

Function obj (o) {

Function F () {}

F.prototype = O;

Return new F ();

}

Function Create (parent,test) {

var f = obj (parent.prototype);//Create object

F.constructor = test;//Enhanced Pair Like

}

 

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);//inherit from here

 

var test = new Child (' Trigkit 4 ', +);

Test.arr.push (' nephew ');

Alert (Test.arr);//

Alert (Test.run ());//shared method only

 

var test2 = new Child (' Jack ');

Alert (Test2.arr);//reference Problem Resolution

</script>

Call and apply

Global functions apply and call can be used to change the direction of this in the function as follows:

Define a global function

function foo () {

Console.log (This.fruit);

}

Define a global variable

var fruit = "Apple";

Customizing an Object

var pack = {

Fruit: "Orange"

};

Equivalent to Window.foo ();

foo.apply (window); "Apple", at which point this is equal to window

The This = = = Pack in foo

Foo.apply (Pack); "Orange"

From: Segmentfault

Links: http://segmentfault.com/blog/trigkit4/1190000002440502

A detailed description of how JavaScript inherits