JavaScript Tutorial: Revisiting the JavaScript inheritance mechanism

Article Introduction: revisit the JavaScript inheritance mechanism.

In the last period of time, the team has several times to share the force, here to the West wind master of the inheritance mechanism to do a little sorting, appropriate add the description of colloquial, stay for the record.

One, tell a story.

To clarify the first, Java and JavaScript is the relationship between Lei Feng and Leifeng Pagoda. JavaScript formerly known as Mocha, was also called LiveScript, the creator is Brendan Eich, is currently the chief technology officer of Mozilla company.

1994, the first relatively mature web browser--navigator0.9 version was born in Netscape (Netscape), a sensational.
However, Navigator0.9 can only be used to browse, do not have the ability to interact with visitors, for example, the user submits a data form, if the form is empty, the browser is not judged, can only be directly submitted to the server side, and then return the null value of the error, so that users can be filled out, which is obviously inefficient and waste resources.

At this time, for Netscape, which is at the forefront of technological innovation, to develop a practical client-script language to deal with these problems became necessary, so the task fell to the engineer Brendan Eich body. He felt it, wood necessary design is very complex, as long as can handle some simple operation is enough, such as to determine whether the user has filled out the form.

1994 is the flourishing era of object-oriented programming (object-oriented programming), C + + is the most popular language, and the Java language version 1.0 will be introduced the following year, Brendan Eich unavoidably affected by it, He wants to think of all the data types in JavaScript as objects (object), which is very similar to Java. However, he immediately encountered a problem, whether or not to design the "inheritance" mechanism?

Ii. Evolution of succession

1, using the new keyword to generate an example

Working with form validation this simple scripting language obviously does not require an "inheritance" mechanism, but if JavaScript is an object, there is a way to connect all objects. Finally, Brendan Eich still designed "inheritance." It's just that he didn't introduce the concept of class, because JavaScript is a complete object-oriented programming language once you have a "class".
This seems a bit too formal, and the design of the original intention is also far, while increasing the beginner's difficulty in getting started.
References to C + + and the Java language Use the new command to generate an instance:

C + + writes this:

ClassName *object = new ClassName (param);

Java writes this:

Foo foo = new Foo ();

You can also introduce the new command into JavaScript, which is used to generate an instance object from a prototype object. However, there is no "class" in JavaScript, how to represent the prototype object?
The constructor function (constructor) of the class is invoked when the new command is still referenced in C + + and Java. Brendan Eich simplifies design, in JavaScript language, the new command is followed by a constructor, no longer a class.
For example, there is now a prototype called a WD constructor that represents a front-end development (Web-developper) object.

function WD (skill) {
	This.skill = skill;
}

With the new keyword for this constructor, an instance of the front-end development object is generated.

var WD1 = new WD (' HTML ');
Console.log (Wd1.skill); Html

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

2, new out of the object of the defect

Using the new keyword, generating instance objects with constructors cannot share properties and methods.
For example, in a WD object's constructor, set a common property skill for an instance object.

function WD (skill) {
	This.skill = skill;
	This.sex = ' male ';
}

Then, two instance objects are generated:

var WD1 = new WD (' HTML ');
var WD2 = new WD (' CSS ');

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

Wd1.skill= ' Javascript ';
Console.log (Wd2.skill);//"CSS", unaffected by WD1

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.

3, the introduction of prototype properties

To implement the sharing of properties and methods, Brendan Eich decides 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 as an example of a WD constructor, now overwrite with the prototype property:

function WD (skill) {
	This.skill = skill;
}

Wd.prototype = {sex: ' Male '};

var WD1 = new WD (' HTML ');
var WD2 = new WD (' CSS ');

Console.log (Wd1.sex); Male
Console.log (wd2.sex);//Male

Now, the sex 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.

WD.prototype.sex = ' female ';
Console.log (Wd1.sex); Female
Console.log (wd2.sex);//female

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.

[1] [2] [3] Next page