Easy Learning of JavaScript 12: JavaScript Object creation based on object-oriented (1)

Easy Learning of JavaScript 12: JavaScript Object creation based on object-oriented (1)

This time, we will take a deeper look at the 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:

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

Objects are arrays of values without specific sequence. Although ECMAScript defines objects as such, it is more commonly defined as code-based nouns (people, places, or

Transactions.

Class

Each object is defined by a class and can be regarded as the formula of an object. The class must not only define the interface of the object (attributes and methods of developer access)

And define the internal work of the object (code that makes the attribute and method play a role ). Both the compiler and the interpreter construct the object according to the class description.

Instance

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 comes from running

The physical memory of the code machine. 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.

(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

ECMAScript is a logical compromise because the object definition is actually the object itself. Even if the class does not exist, we define the object

It is called a 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.

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 English

. 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.

Second 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

Solve the problem of large number of duplicates produced by instantiated objects.

(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: bluedocument. 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 pair

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, 4, 23); var Car2 = createCar (blue, 3, 25); document. write (Car1.showColor () +); // output: reddocument. 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 makes the two objects have the same

But has different attribute values.

The factory method solves the problem of repeated instantiation, but there is still a problem, that is, in the previous example, every time the createCar () function is called

To create a new function showColor (), 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, 4, 23); var Car2 = createCar (blue, 3, 25); document. write (Car1.showColor () +); // output: reddocument. write (Car2.showColor (); // output: blue

 

In the Code rewritten above, the showColor () function is defined before the createCar () function (). Inside createCar (), assign the object

Pointer to an existing showColor () function. In terms of functions, this solves the problem of repeatedly creating function objects.

Functions are not like object methods. All these problems have caused the emergence of constructors defined by developers.

Three Constructors

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 large.

Write to separate it from the variable name whose first letter is usually in lower case. Except for this difference, constructor looks like a factory function. See the following example.

Sub:

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, 4, 23); var Car2 = new Car (blue, 3, 25); document. write (Car1.showColor () +); // output: reddocument. 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. Use new

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

It is the return value of the constructor (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

The general object creation method in ECMAScript.

Just like a factory function, constructor will repeatedly generate a function and create an independent function version for each object. However, functions with factory methods

Similarly, you can use an external function to override the constructor. Likewise, this method has no meaning in semantics. This is the advantage of prototype.