How to create an object based on object-oriented JavaScript (1) _ javascript skills

This article describes how to create an object based on object-oriented JavaScript, interested friends can refer to this in-depth study of JavaScript object-oriented technology. Before learning, we need to explain some object-oriented terms. This is what all faces object languages have in common. There are several object-oriented terms:
I, Object
The ECMA-262 defines an object as an unordered set of attributes, each of which stores an original value, object, or function ". Strictly speaking, this means that the object is an array of values without specific sequence. Although ECMAScript defines objects as such, it is more commonly defined as the representation of Code-based nouns (people, places, or things.
Ii. Category
Each object is defined by a class and can be regarded as the formula of an object. Classes must not only define the interface of an object (attributes and Methods accessed by developers), but also define the internal work of the object (code that makes the attributes and methods take effect ). Both the compiler and the interpreter construct the object according to the class description.
Iii. Instances
When a program uses a class to create an object, the generated object is called an instance of the class ). The only limit on the number of objects generated by the class is the physical memory of the machine that runs the code. The behavior of each instance is the same, but the instance processes a group of independent data. The process of creating an object instance by class is called instantiation ).
We mentioned in the previous chapter that ECMAScript does not have a formal class. Instead, the ECMA-262 describes the formulation of an object definition as an object. This is a logical compromise of ECMAScript, because the object definition is actually the object itself. Even if the class does not actually exist, we also call the object definition class, because most developers are more familiar with this term and the two are equivalent in terms of functionality.
The use of predefined objects is only part of the ability of object-oriented languages. Its real strength lies in its ability to create its own specialized objects. ECMAScript has many object creation methods.
1. Original Method
Because object attributes can be dynamically defined after an object is created, many developers write code similar to the following when JavaScript is first introduced:

Var Car = new Object (); Car. color = "blue"; Car. doors = 4; Car. mpg = 25; Car. showColor = function () {return this. color;}; document. write (Car. showColor (); // output: blue

In the above Code, create the Car object. Then set several properties for it: the color is blue, there are four doors, each gallon of oil can run 25 miles. The last attribute is actually a pointer to a function, which means this attribute is a method. After executing this code, you can use the object Car. However, there is a problem here, that is, you may need to create multiple Car instances, which causes us to repeat a lot of similar code, which will be very troublesome.
2. Factory Mode
To solve the preceding multiple similar object declarations, the developer creates a factory method that can create and return specific types of objects. This method is used to solve the problem that a large number of duplicates are generated for the instantiated object.
(1) No parameter factory Method
For example, the createCar () function can be used to encapsulate the operations for creating Car objects listed above:

Function createCar () {var TempCar = new Object (); TempCar. color = "blue"; TempCar. doors = 4; TempCar. mpg = 25; TempCar. showColor = function () {return this. color ;}; return TempCar ;}; var Car1 = createCar (); var Car2 = createCar (); document. write (Car1.showColor () +"
"); // Output: blue document. write (Car2.showColor (); // output: blue

All the code in the first example is included in the createCar () function. In addition, there is an additional line of code that returns the TempCar object as the function value. Call this function to create a new object and grant it all the necessary attributes to copy the Car object we described earlier. Therefore, using this method, we can easily create two versions of the Car object (Car1 and Car2) with identical attributes.
(2) Factory method with Parameters
We can also modify the createCar () function to pass the default values of each attribute to it, instead of simply assigning the default values to the attribute:

Function createCar (Color, Doors, Mpg) {var TempCar = new Object (); TempCar. color = Color; TempCar. doors = Doors; TempCar. mpg = Mpg; TempCar. showColor = function () {return this. color ;}; return TempCar ;}; var Car1 = createCar ("red",); var Car2 = createCar ("blue",); document. write (Car1.showColor () +"
"); // Output: red document. write (Car2.showColor (); // output: blue

Add a parameter to the createCar () function to assign values to the color, doors, and mpg attributes of the Car object to be created. This enables two objects to have the same property but different property values.
The factory method solves the problem of repeated instantiation, but there is still a problem, that is, in the previous example, each time the createCar () function is called, a new function showColor () is created (), this means that each object has its own showColor () version. In fact, each object shares the same function. Some developers Define object Methods outside the factory function and point to this method through properties to avoid this problem:

Function showColor () {return this. color ;}; function createCar (Color, Doors, Mpg) {var TempCar = new Object (); TempCar. color = Color; TempCar. doors = Doors; TempCar. mpg = Mpg; TempCar. showColor = showColor; return TempCar;}; var Car1 = createCar ("red",); var Car2 = createCar ("blue",); document. write (Car1.showColor () +"
"); // Output: red document. write (Car2.showColor (); // output: blue

In the Code rewritten above, the showColor () function is defined before the createCar () function (). Inside createCar (), assign the object a pointer to an existing showColor () function. In terms of functions, this solves the problem of repeatedly creating function objects. However, in terms of semantics, this function is not like an object method. All these problems have caused the emergence of constructors defined by developers.
3. constructor Method
Creating constructors is as easy as creating a factory function. Step 1 select the name of the constructor. By convention, the first letter of the name is capitalized so that it is separated from the variable name whose first letter is usually lowercase. Except for this difference, constructor looks like a factory function. See the following example:

Function Car (Color, Doors, Mpg) {this. color = Color; this. doors = Doors; this. mpg = Mpg; this. showColor = function () {return this. color ;};}; var Car1 = new Car ("red",); var Car2 = new Car ("blue",); document. write (Car1.showColor () +"
"); // Output: red document. write (Car2.showColor (); // output: blue

The following explains the difference between the above Code and the factory method. First, the object is not created in the constructor, but the this keyword is used. When using the new operator to construct a function, create an object before executing the first line of code. Only this can be used to access this object. Then you can directly assign this attribute, which is the return value of the constructor by default (you do not need to explicitly use the return operator ). Now, using the new operator and the Object Name Car to create an object is more like creating an object in ECMAScript.
Just like a factory function, constructor will repeatedly generate a function and create an independent function version for each object. However, similar to a factory function, you can also use an external function to rewrite the constructor. Likewise, this does not have any meaning in semantics. This is the advantage of prototype. In the next article, we will analyze the object-oriented prototype and other comprehensive methods in detail.

The above is all the content of this article, and I hope it will help you learn javascript programming.