The design idea of JavaScript inheritance mechanism sharing _javascript skills

It's been hard for me to understand the inheritance mechanism of JavaScript language.

It does not have the concept of "subclass" and "parent", and there is no distinction between "class" and "instance" (instance), which relies on a peculiar "prototype chain" (prototype chain) pattern to implement inheritance.

I spent a lot of time studying this part and taking a lot of notes. But all belong to the forced memory, can not fundamentally understand.

It was not until yesterday that I read the explanation of the French programmer, Vjeux, that I understood exactly why JavaScript was designed.

Next, I try to explain its design ideas in my own language. Tell me exactly what's going on with the prototype object. It's not that complicated at all, but the truth is simple.

First, speaking from ancient times

To understand the design of JavaScript, we must begin with its birth.

1994, Netscape (Netscape) released the Navigator browser version 0.9. This is the first more mature web browser in history, hit. However, this version of the browser can only be used to browse, do not have the ability to interact with visitors. For example, if the page has a column "user name" required to fill out, the browser can not determine whether the visitor is really filled out, only let the server-side judgment. If not filled out, the server side returns an error, requiring the user to fill in, which is too waste of time and server resources.

As a result, Netscape needs a scripting language that allows browsers to interact with Web pages. Engineer Brendan Eich is responsible for developing this new language. He felt that there was no need to design very complex, this language as long as can complete some simple operation is enough, such as to determine whether the user has filled out the form.

1994 is the most prosperous period of object-oriented programming (object-oriented programming), C + + was the most popular language at the time, and the 1.0 edition of the Java language is about to be launched the following year, Sun is making a big hype.

Brendan Eich is undoubtedly affected, and JavaScript is all data types are objects (object), which is very similar to Java. However, he immediately encountered a problem, whether or not to design the "inheritance" mechanism?

Ii. selection of Brendan eich

If it is really a simple scripting language, there is no need to have an "inheritance" mechanism. However, JavaScript is all objects, and there must be a mechanism for linking all objects. Therefore, Brendan Eich finally designed the "inheritance".

However, he does not intend to introduce the concept of "class", because JavaScript is a complete object-oriented programming language Once there is a "class", which seems a bit too formal and adds to the difficulty of beginners.

He considers that both C + + and the Java language Use the new command to generate an instance.
C + + is written in the following notation:

ClassName *object = new ClassName (param);

The Java notation is:

Foo foo = new Foo ();

As a result, he introduced the new command into JavaScript, which was used to generate an instance object from a prototype object. But, JavaScript does not have "class", how to represent the prototype object?

When he thought of C + + and Java using the new command, he would invoke the "class" constructor (constructor). He made a simplified design, in the JavaScript language, the new command is followed by not a class, but a constructor.

For example, there is now a constructor called Dog that represents the prototype of a dog object.

function DOG (name) {

THIS.name = name;

}

When you use new for this constructor, an instance of a dog object is generated.

var Doga = new DOG (' hairy ');

alert (doga.name); Nagymaros

Note the This keyword in the constructor, which represents the newly created instance object.

Disadvantages of the new operator

The disadvantage of generating instance objects with constructors is that you cannot share properties and methods.

For example, in the constructor of a dog object, set the common property species of an instance object.

function DOG (name) {

THIS.name = name;

　　this.species = ' canine Division ';

}

Then, two instance objects are generated:

var Doga = new DOG (' hairy ');

var dogb = new DOG (' Er Mao ');

The species property of the two objects is independent, and modifying one does not affect the other.

doga.species = ' cat family ';

alert (dogb.species); Show "canine", not affected by Doga

Each instance object has its own copy of the properties and methods. This not only can not do data sharing, but also a huge waste of resources.

Iv. Introduction of prototype attributes

With this in mind, Brendan Eich decided to set a prototype property for the constructor.

This property contains an object (hereinafter referred to as "prototype object") in which all instance objects need to be shared properties and methods, all of which are placed inside the object, and those that do not need to be shared are placed inside the constructor.

Once the instance object is created, the properties and methods of the prototype object are automatically referenced. That is, the properties and methods of an instance object are divided into two types, one local and the other referenced.

Or take the dog constructor as an example, now overwrite with the prototype property:

function DOG (name) {

THIS.name = name;

}

dog.prototype = {species: ' canine '};

var Doga = new DOG (' hairy ');

var dogb = new DOG (' Er Mao ');

alert (doga.species); Dog family

alert (dogb.species); Dog family

Now, the species attribute is placed in the prototype object and is shared by two instance objects. As long as the prototype object is modified, it affects two instance objects at the same time.

DOG.prototype.species = ' cat family ';

alert (doga.species); Cat family

alert (dogb.species); Cat family

V. Summary

Since all instance objects share the same prototype object, the prototype object looks like the prototype of the instance object from the outside, and the instance object seems to "inherit" the prototype object.

This is the design idea of the JavaScript inheritance mechanism. I don't know, I made myself clear. The specific application method of inheritance mechanism can refer to the series of articles I wrote