Javascript Object-Oriented Programming

In addition, this article is an entry-level article. I also started to learn Javascript and want to write such an article with a little experience. It is inevitable that there will be errors in this article, please give me a comment

Spam Javascript
When I first came into contact with Javascript, this language does make many regular troops feel a lot of discomfort. This discomfort comes from the concise and not rigorous Javascript syntax. This discomfort also comes from the name of the miserable Javascript reminder, I was thinking that the Javascript designer of Wangjing company had to give him a name that day, so that Javascript had suffered so much injustice for so many years that people thought he was an accessory to Java, a web toy language. Therefore, some people will despise Javascript and think that Javascript is not a real language, but they are really wrong. Javascript is not only a language, but also a true and positive language. It is also a milestone language, and he creates a variety of new programming model prototype inheritance and closure (note: closures are not the first in Javascript. Scheme should be the first. prototypal inheritance and dynamic objects are the first in self language. The first in Javascript is not brilliant. Thank you for your correction .), It has a huge impact on the later Dynamic Language. As one of the most popular languages today, you can see the most popular language types submitted on git. With the advent of HTML5, the browser will be able to show its skills on personal computers. When there is a tendency to replace OS completely, Javascript is the only real language in the browser, just like C in unix/linux, java is for JVM and Cobol is for MainFrame. We also need to carefully understand and review this language. In addition, the official name of Javascript is ECMAScript, which is much more handsome than Javascript!

Let's get down to the point. Let's get into the subject-Javascript object-oriented programming. To talk about Javascript object-oriented programming, the first thing we need to do is to forget the object-oriented programming we have learned. The traditional Object-oriented Thinking of C ++ or Java to learn Javascript Object-oriented thinking will bring you a lot of confusion, let us forget what we have learned first, start learning this special object-oriented programming. Since it is OO programming, how can we understand OO programming? I remember that I had been learning C ++ for a long time and I was not getting started, later, I was lucky enough to read The masterpiece "Inside The C ++ Object Model", which suddenly became very open. Therefore, this article will also discuss Javascript OO programming in The form of Object models. Because of the particularity of the Javascript Object Model, the inheritance of Javascript is very different from the traditional inheritance. At the same time, there is no class in Javascript, which means there is no extends or implements in Javascript. So how does Javascript implement OO programming? Okay, let's get started. Let's make a tour in the Javascript OO world.

First, we need to first look at how Javascript defines an object. The following is an object definition:

Copy codeThe Code is as follows: var o = {};

You can also define an object in this way.

Copy codeThe Code is as follows: function f (){}

Yes, you are not mistaken. In Javascript, functions are also objects.
Yes, of course.

Copy codeThe Code is as follows: var array1 = [1, 2, 3];

An array is also an object.
For other descriptions of the basic concepts of objects, please refer to the article "Javascript object-oriented programming" by Chen Hao.
The only thing the object does not have is the class. Because there is no class keyword in Javascript, there is also a function. The existence of the function allows us to define the class flexibly, before extending this topic, we also need to understand the most important attribute of a Javascript Object, __proto _ member.

_ Proto _ Member
Strictly speaking, this member should not be called. __proto _ is the name in Firefox and __proto _ is accessible only in Firefox. As an object, when you access a member or method, if the object does not contain this method or member, the Javascript Engine accesses another object pointed to by the _ proto _ Member of the object and searches for the specified method or member in the object. If the object cannot be found, then, recursive search will continue through the object indicated by the _ proto _ Member of the object until the end of the linked list.
Let's take an example.
For example, array1. When we create the array1 object, the actual object model of array1 In the Javascript engine is as follows:

The array1 object has a length attribute value of 3, but we can add an element to array1 using the following method:

Copy codeThe Code is as follows: array1.push (4 );

The push method comes from a method (Array. prototye. push () in which the _ proto _ member of array1 points to the object ()). It is precisely because all Array objects (created through []) contain a method object (Array. prototype), so that these array objects can use push, reverse and other methods.

Then the _ proto _ attribute is equivalent to the "has a" relation in the object-oriented model. In this case, as long as we have a template object such as Array. the prototype object, and then point the other object _ proto _ property to this object, it completes an inheritance mode. Good! We can do this. But don't be happy too early. This attribute is only valid in FireFox. Although other browsers also have attributes, it cannot be accessed through _ proto, only the getPrototypeOf method can be used for access, and this attribute is read-only. It seems that it is not easy for us to implement inheritance in Javascript.

Function object prototype member
First, let's take a look at the definition of a prototype member,

When a function object is created, it is given a prototype member which is an object containing a constructor member which is a reference to the function object
When a function object is created, this function object has a prototype member, which is an object and contains a constructor, this constructor points to this function object.

For example:

Copy codeThe Code is as follows: function Base (){
This. id = "base"
}

The Base function object has a prototype member. Why do we call this type of function as a constructor about constructing the Base function object itself? This is because these functions are designed to be used with the new operator. In order to be different from common function objects, the first letter of such functions is generally capitalized. The main function of constructor is to create a similar object.

The above code is like this in the object model of the Javascript engine.


New operator
After introducing the basic concepts above, we can create objects in the traditional object-oriented class + new method by adding the new operator. In Javascript, we will convert this method into pseudo-class.
Based on the above example, we execute the following code:

Copy codeThe Code is as follows: var obj = new Base ();

What is the result of this Code? The object model we see in the Javascript engine is:

What does the new operator do? In fact, it is very easy to do three things.

Copy codeThe Code is as follows: var obj = {};
Obj. _ proto _ = Base. prototype;
Base. call (obj );

In the first line, we created an empty object obj.
In the second row, we direct the _ proto _ member of this empty object to the prototype member object of the Base function object.
In the third row, we replace this pointer of the Base function object with obj, and then call the Base function. Therefore, we assign an id member variable to the obj object, the value of this member variable is "base". For usage of the call function, see Chen Hao's article on Javascript object-oriented programming.
What will happen if we add some functions to the Base. prototype object?
For example, the Code is as follows:
Copy codeThe Code is as follows: Base. prototype. toString = function (){
Return this. id;
}

When we use new to create a new object, the toString method can also be accessed based on the features of _ proto. So we can see:
In the constructor, we will set the member variables of the 'class' (for example, id in the example) and construct the public methods of the 'class' in the prototype sub-object. Therefore, the effects of Class and Class instantiation are simulated through the function object and the Javascript special _ proto _ with prototype members and the new operator.

Pseudo classical inheritance
We simulate the class, so what should we do with inheritance? In fact, it is very simple. We only need to point the prototype of the constructor to the parent class. For example, we design a Derive class. As follows:

Copy codeThe Code is as follows: function Derive (id ){
This. id = id;
}
Derive. prototype = new Base ();
Derive. prototype. test = function (id ){
Return this. id = id;
}
Var newObj = new Derive ("derive ");

What is the object model after code execution? According to the previous derivation, it should be the following Object Model

In this way, newObj inherits the toString method of the Base class and has its own member id. We will leave this object model to all of you. It is not difficult to deduce this object model as described above.
The inheritance of pseudo classical will make C ++/Java students feel a little comfortable, especially the new Keyword. Although the two are similar, the mechanism is completely different. Of course, any inheritance cannot be left without the _ proto _ member.

Prototypal inheritance
This is another Inheritance Method of Javascript. This inheritance is the create Function in the previous article "Javascript object-oriented programming" by Chen Hao. Unfortunately, this is the standard of ECMAScript V5, currently, browsers supporting V5 are IE9, the latest Chrome version, and Firefox version. Although there are many, I suggest you avoid using the create FUNCTION IN CHINA, the hardest hit area of Internet Explorer 6. Fortunately, before the create FUNCTION is available, Javascript users have designed a function equivalent to this function. For example, let's look at the object function of Douglas Crockford.
Copy codeThe Code is as follows: function object (old ){
Function F (){};
F. prototype = old;
Return new F ();
}
Var newObj = object (oldObject );

For example, the following code snippet

Copy codeThe Code is as follows: var base = {
Id: "base ",
ToString: function (){
Return this. id;
}
};
Var derive = object (base );

The object model after the above function execution is:

The principle of how to form such an object model is also very simple. As long as you extend the object function, you can draw this model and leave it to the reader.
This inheritance method is called prototype inheritance. It is relatively easier and more convenient than the inheritance of pseudo classical. ECMAScript V5 adds the create FUNCTION for this reason, allowing developers to quickly implement prototype inheritance.
The above two inheritance methods are the most common inheritance methods in Javascript. Through the explanation in this article, you should have a certain understanding of Javascript's OO programming at the 'topology' level.

Refer:
Prototypes and Inheritance in JavaScript
Advance Javascript (a video of the great god of Douglas Crockford, be sure to watch it) digress:
After web, web applications have developed rapidly. Today, when HTML5 is released, Browser functions are greatly enhanced. I feel that Browser is far from being as simple as a Browser. I remember that the father of C ++ once said that JAVA is not a cross-platform, and JAVA itself is a platform. Today's Browser is itself a platform. Fortunately, this platform is based on standards. If Browser is a platform, and due to Browser security sandbox restrictions, personal Computer resources are rarely used, is Browser a Network Computer )? We actually went back to Sun's initial idea. Is Sun too powerful?