Design Philosophy of Javascript Inheritance Mechanism _ javascript skills

I spent a lot of time learning this part and made many notes. However, they all belong to forced memory and cannot be understood fundamentally. I have been hard to understand the Inheritance Mechanism of the Javascript language.

It does not have the concepts of "subclass" and "parent class", nor does it distinguish between "class" and "instance, inheritance is implemented by a prototype chain mode.

I spent a lot of time learning this part and made many notes. However, they all belong to forced memory and cannot be understood fundamentally.

It was not until yesterday that I had read the explanation of French programmer Vjeux that I suddenly realized why Javascript was designed like this.

Next, I try to explain its design ideas in my own language. It thoroughly describes what the prototype object is. In fact, it is not that complicated, and the truth is very simple.

I. Starting from ancient times

To understand the design idea of Javascript, we must start with its birth.

In 1994, Netscape released the Navigator browser version 0.9. This is the first mature web browser in history. However, this version of browser can only be used for browsing and does not have the ability to interact with visitors. For example, if the "user name" field on the webpage is required, the browser will not be able to judge whether the visitor has actually entered the field. Only the server can judge whether the visitor has actually entered the field. If this parameter is not specified, the server returns an error and asks the user to enter it again. This is a waste of time and server resources.

Therefore, Netscape urgently needs a web scripting language that allows browsers to interact with Web pages. Engineer Brendan Eich is responsible for developing this new language. He believes that there is no need to design a complex language. It is enough to complete some simple operations, such as judging whether the user has filled out a form.

In 1994, object-oriented programming (object-oriented programming) was the most prosperous period. C ++ was the most popular language at that time, and Java version 1.0 was about to be launched in the second year, sun is gaining momentum.

Brendan Eich is undoubtedly affected. All data types in Javascript are objects, which is very similar to Java. However, he immediately encountered a problem. Do you want to design a "inheritance" mechanism?

Ii. Selection of Brendan Eich

If it is a simple scripting language, there is no need for an "inheritance" mechanism. However, Javascript contains all objects and must have a mechanism to associate all objects. Therefore, Brendan Eich finally designs "inheritance ".

However, he does not want to introduce the concept of "class" because Javascript is a complete object-oriented programming language, this seems a little formal, and increases the difficulty of getting started for beginners.

He considers that both C ++ and Java use the new command to generate an instance.
C ++ is written as follows:

ClassName * object = new ClassName (param );

Java is written as follows:

Foo foo = new Foo ();

Therefore, he introduced the new command to Javascript to generate an instance object from the prototype object. However, Javascript does not have a "class". How does it represent a prototype object?

In this case, when C ++ and Java use the new command, they call constructor ). In Javascript, the new command is followed by a constructor instead of a class.

For example, there is a constructor called DOG to represent the prototype of a DOG object.

Function DOG (name ){

This. name = name;

}

Using new for this constructor generates an instance of the dog object.

Var dogA = new DOG ('taobao ');

Alert (dogA. name); // damao

Note that the this keyword in the constructor represents the newly created instance object.

3. disadvantages of the new operator

One disadvantage of generating instance objects using constructors is that attributes and methods cannot be shared.

For example, in the DOG object constructor, set a common attribute species for an instance object.

Function DOG (name ){

This. name = name;

　　This. species = 'kenice ';

}

Then, two instance objects are generated:

Var dogA = new DOG ('taobao ');

Var dogB = new DOG ('ermao ');

The species attributes of these two objects are independent. Modifying one of them does not affect the other.

DogA. species = 'cat ';

Alert (dogB. species); // displays "dogs", not affected by dogA

Each instance object has its own copy of attributes and methods. This is not only unable to achieve data sharing, but also a great waste of resources.

Iv. Introduction of prototype attributes

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

This attribute contains an object (hereinafter referred to as "prototype object"). All the attributes and methods to be shared by instance objects are placed in this object. Those attributes and methods that do not need to be shared are, put it in the constructor.

Once an instance object is created, the attributes and methods of the prototype object are automatically referenced. That is to say, the attributes and methods of the Instance Object are divided into two types: local and referenced.

The following uses the DOG constructor as an example to rewrite the prototype attribute:

Function DOG (name ){

This. name = name;

}

DOG. prototype = {species: 'kenecs '};

Var dogA = new DOG ('taobao ');

Var dogB = new DOG ('ermao ');

Alert (dogA. species); // dogs

Alert (dogB. species); // dogs

Now, the species attribute is placed in the prototype object, which is shared by two instance objects. If the prototype object is modified, the two instance objects are affected at the same time.

DOG. prototype. species = 'cat ';

Alert (dogA. species); // cat

Alert (dogB. species); // cat

V. Summary

Because all instance objects share the same prototype object, prototype objects seem to be prototype objects, while instance objects seem to have inherited prototype objects.

This is the design idea of the Javascript Inheritance Mechanism. I don't know if I have made it clear. For details about the application method of the Inheritance Mechanism, refer to my series of articles.