Easy Learning JavaScript 12: JavaScript-based object-oriented object creation (II)

Four-way prototype

Each function we create has a pass prototype (prototype) attribute, which is an object whose purpose is to contain a specific type of

properties and methods that are shared by all instances of the This is logically understood: Prototypt The prototype object of the object that was created by using a constructor. Make

The advantage of using prototypes is that you can have all object instances share the properties and methods that it contains. In other words, you do not have to define object information in the constructor, and

is to add this information directly to the prototype.

The prototype takes advantage of the object's prototype property, which can be seen as the prototype on which the new object is created. Here, first use the empty constructor to set the

The function name. All properties and methods are then directly assigned to the prototype property. I rewrote the previous example with the following code:

function Car () {};//assigns all the properties of the method to the prototype property Car.prototype.color = "Blue"; Car.prototype.doors = 4; Car.prototype.mpg = 25; Car.prototype.showColor = function () {     return this.color;}; var Car1 = new car (), var Car2 = new car ();d Ocument.write (Car1.showcolor () + "<br/>");//output: Bluedocument.write ( Car2.showcolor ());//output: Blue

In this code, you first define the constructor car (), which has no code. The next few lines of code are added by giving the prototype property of car

property to define the properties of the car object. When you call new car (), all properties of the prototype are immediately assigned to the object to be created, which means that all car instances are stored

The pointer to the Showcolor () function is placed. Semantically, all properties appear to belong to one object, so the previous factory approach is resolved

And the way the constructor functions.

In addition, you can use the instanceof operator to check the type of the object that the given variable points to by using this method:

<span style= "FONT-SIZE:18PX;" >document.write (Car1 instanceof Car);//Output:true</span>

Prototyping looks like a good solution. Unfortunately, it's not as satisfactory. First, this constructor has no parameters. Using the prototype side

, you cannot initialize the value of a property by passing parameters to the constructor, because the color properties of Car1 and Car2 are equal to "Blue", The doors attribute is equal to

The 4,mpg property is equal to 25. This means that the default value of the property must be changed after the object is created, which is annoying, but not finished. The real question

The problem occurs when a property points to an object, not a function. Function sharing does not cause problems, but objects are rarely shared by multiple instances. Please consider the following

Example:

function Car () {};//defines an empty constructor and cannot pass parameters Car.prototype.color = "Blue"; Car.prototype.doors = 4; Car.prototype.mpg = 25; Car.prototype.drivers = new Array ("Mike", "John"); Car.prototype.showColor = function () {      return this.color;}; var Car1 = new car (), var Car2 = new car (); Car1.drivers.push ("Bill");d ocument.write (car1.drivers+ "<br/>");//output: Mike,john,billdocument.write ( car2.drivers);//output: Mike,john,bill

In the preceding code, the property drivers is a pointer to an array object that contains two names "Mike" and "John". Since drivers is a reference

Value, two instances of car point to the same array. This means adding the value "Bill" to Car1.drivers, which can be seen in car2.drivers. Output these two

Any one of the pointers, the result is a string "Mike,john,bill". Because there are so many problems when creating objects, you will think, is there any kind of

What is the logical way to create objects? The answer is yes, you need to use a combination of constructors and prototypes.

five hybrid constructor/prototype mode (recommended)

Using a mix of constructors and prototypes, you can create objects as you would in other programming languages. This concept is very simple, that is, the use of structural letters

The number defines all the non-function properties of an object, using a prototype to define the function properties (methods) of the object. As a result, all functions are created only once, and each

Object has its own instance of an object property. We have rewritten the previous example with the following code:

function Car (color,doors,mpg) {  this.color = Color;  this.doors = doors;  This.mpg = mpg;  This.drivers = new Array ("Mike", "John"); Car.prototype.showColor = function () {         return this.color;}; var Car1 = new Car ("Red", 4,23), var Car2 = new Car ("Blue", 3,25); Car1.drivers.push ("Bill");d ocument.write (car1.drivers+ "<br/>");//output: Mike,john,billdocumnet.write ( car2.drivers);//output: Mike,john

Now it's more like creating a generic object. All non-function properties are created in constructors, which means that they can be given properties using the constructor's arguments

The default value. Because only one instance of the Showcolor () function is created, there is no memory waste. In addition, add the "Bill" value to the drivers array of Car1,

Does not affect the CAR2 array, so when you output the values of these arrays, Car1.drivers displays "Mike,john,bill", and Car2.drivers displays the

Is "Mike,john". The instanceof operator can still be used to determine the type of an object, because of the prototype approach.

This approach is the main way of ECMAScript, which has other features but no side effects. However, some developers still feel

This method is not perfect enough.

Six dynamic prototyping mode

For developers who are accustomed to using other languages, using mixed constructors/prototypes does not feel so harmonious. After all, when defining a class, most

Object-oriented languages visually encapsulate properties and methods. Consider the following Java class:

Class Car {public  String color = "Blue";  public int doors = 4;  public int mpg =;  Public Car (String color, int doors, int mpg) {      this.color = color;      this.doors = doors;      This.mpg = mpg;  }  public void Showcolor () {      System.out.println (color);  }}

Java nicely packs all the properties and methods of the car class, so seeing this code knows what it is going to do, and it defines an object's

Information. Critics of mixed constructors/prototypes argue that it is illogical to look for a property inside a constructor and find a method outside of it. Therefore, he

We designed a dynamic prototyping approach to provide a more user-friendly coding style.

The basic idea of a dynamic prototyping method is the same as a mixed constructor/prototype, where a non-function attribute is defined within a constructor, and the function property uses

The prototype attribute definition. The only difference is where the object method is given. The following is a car that is rewritten with the dynamic prototyping method:

function Car (color,doors,mpg) {  this.color = Color;  this.doors = doors;  This.mpg = mpg;  This.drivers = new Array ("Mike", "John");  If the _initialized in the car object is undefined, it indicates that the method  if (typeof car._initialized = = "undefined") has not been added for the prototype of car {         Car.prototype.showColor = function () {                return this.color;         };         Car._initialized = true; Set to True to no longer add a method to prototype  }}var Car1 = new Car ("Red", 4,23);//Generate a Car object var Car2 = new Car ("Blue", 3,25); Car1.drivers.push ("Bill");//Add an element document.write (car1.drivers+ "<br/>") to the drivers property of the Car1 object instance;//output: Mike,john , Billdocument.write (car2.drivers);//output: Mike,john

This constructor is not changed until the typeof Car._initialize is checked to be equal to "undefined". This line of code is a dynamic prototyping method

The most important part of the If this value is undefined, the constructor will continue to define the method of the object in a prototype manner, and then set the car._initialized to

true. If the value is defined (its value is true, the value of typeof is Boolean), then the method is no longer created. In short, the method uses

Flag (_initialized) to determine if any method has been given to the prototype. This method is created and assigned only once, and traditional OOP developers are happy to send

Now, this code looks more like a class definition in other languages.

What kind of approach should we adopt?

as mentioned earlier, the most widely used is the hybrid constructor/prototype approach. In addition, the dynamic prototyping method is also very popular, in the function and the structure letter

The Number/prototype method is equivalent. either of these two approaches can be used. However, do not use the classic constructor or prototype method alone , as this will give

Code introduction issues. In short, JS is based on an object-oriented client-side scripting language, we learn its object-oriented technology to pay attention to JS and

Other high-rigor programming languages are different. It is also appropriate to use JS to create objects in a reasonable way, it is recommended to use a combination of constructors and prototyping methods

Creates an object instance. This can avoid many unnecessary troubles.

Easy Learning JavaScript 12: JavaScript-based object-oriented object creation (II)