Home>

JavaScript is an object-oriented, weakly typed language.Inheritance is also one of its very powerful features.So how to implement inheritance in js?This article will unveil the mystery for everyone

Recently working on the front end,Because it was done before.There are more net and php developments.Front-end developers like to use the library,It turns out several times,Do not understand the principle,Not even changing the code,So I decided to study several technical difficulties of JavaScript.

0x1.javascript objects and constructors

Defining a javascript object can be defined like this

var a={
x:1,y:2,add:function () {
return this.x + this.y;
},mul:function () {
return this.x * this.y;
}
}

In this way, you have defined a variable a, in addition to two public members x and y,There are also two add and mul functions (public methods). But there are two disadvantages to this definition:

1. It is inconvenient to generate objects in batches.If you var b=a;then every time you modify the member of b, you will also change the member of a at the same time, because the javascript reference mechanism

2. If you need to customize some members every time you generate an object,Must write the corresponding assignment operation,Increase the number of lines of code.

So, before defining a javascript object,We can first define a constructor.

function a (x, y) {
this.x=x;
this.y=y;
this.add=function () {
return this.x + this.y;
}
this.mul=function () {
return this.x * this.y;
}
}

Then, define an object

a=new a (1, 2);

The above code looks simple,But to distinguish it from object-oriented languages ​​such as C++,a is not a strictly "class" concept, because javascript has no class,It just calls the constructor.

Now the question comes,How do we achieve inheritance?C++ implements the three object-oriented features of encapsulation, inheritance, and polymorphism clearly.But for a more linguistic language like javascript,There is no very strict inheritance mechanism,Instead, use the following methods to simulate.

0x2.javascript prototype

In order to be able to clarify the later apply or call function, here we first introduce the prototype. Prototype is only available in functions.

To make good use of inheritance,The first thing to understand is why you should design inheritance?Nothing more than "extracting the public part"Implement code reuse.

So in JavaScript, the public part is also placed in the function prototype.

Let's compare two examples of inheritance using prototype

function a (x, y) {
this.x=x;
this.y=y;
this.add=function () {
return this.x + this.y;
}
this.mul=function () {
return this.x * this.y;
}
}
function b (x, y) {
}
b.prototype=new a (1,2);
console.log (new b (3,4) .add ());//3

In this example,Subclass prototype points to a class A object

Let's implement another example where b inherits a:

function a () {
}
a.prototype={
x:1,y:2,add:function () {
return this.x + this.y;
},mul:function () {
return this.x * this.y;
}
}
a.prototype.constructor=a;
function b () {
}
b.prototype=a.prototype;
b.prototype.constructor=b;

The prototype object of b refers to the prototype object of a, because it is a reference,So if the prototype object of b is modified, the prototype object of a is also modified,Because essentially they all point to a piece of memory.So every time you change the prototype of type b, you must manually change the constructor back to prevent confusion.Compared to two examples,The previous example was not quoted,So this problem does not happen.

Create an object of type b

b=new b ();

b object has all members of type a

console.log (b.add ());//3

Because each prototype object has two important members:constructor and _proto_, constructor is essentially a function pointer,Therefore, after b.prototype=a.prototype is executed, the constructor is overwritten, so the constructor must point to the constructor of type b later.

0x3.javascript constructor binding

After defining a constructor of type a,Define a b type, and then inside the b type constructor,Constructor of "embedded execution" type a.

function a (x, y) {
this.x=x;
this.y=y;
this.add=function () {
return this.x + this.y;
}
this.mul=function () {
return this.x * this.y;
}
}
function b (x, y, z) {
a.apply (this, arguments);
this.z=z;
}
console.log (new b (1,2,3));

The apply function is basically the same as the call function.A type constructor can be executed inside a b type constructor.It can also inherit all members of a.

Show results:

Here is a formula:write a.apply (this) in the b constructor, so that the object constructed by b can have all members in the a constructor.

Speaking of apply and call, multiple inheritance can also be implemented

function ia () {
this.walk=function () {
console.log ("walk");
}
}
function ib () {
this.run=function () {
console.log ("run");
}
}
function person () {
ia.apply (this);
ib.apply (this);
}
var p=new person ();
p.walk ();//walk
p.run ();//run
  • Previous Hibernate secondary cache in java
  • Next Detailed steps to install Scrapy under CentOS7