Detailed JavaScript based object-oriented object creation (1) _javascript tips

This time we delve into JavaScript object-oriented technology, and before we learn, we need to explain some of the object-oriented terminology. This is the common denominator that all face object language has. There are several object-oriented terms:
OneObject
ECMA-262 defines objects (object) as an unordered collection of attributes, with each property holding an original value, object, or function. Strictly speaking, this means that an object is an array of values that are not in a particular order. Although ECMAScript so defines objects, it is more commonly defined as the representation of a noun (person, place, or thing) based on a code.
second, the class
Each object is defined by a class, and you can think of the class as the object's recipe. A class not only defines the object's interface (interface) (the properties and methods that the developer accesses), but also defines the internal work of the object (the code that makes the properties and methods useful). Both the compiler and the interpreter build the object based on the description of the class.
Iii. Examples
When a program creates an object using a class, the generated object is called an instance of the class (instance). The only limit to the number of objects generated on a class is the physical memory of the machine that is running the code. Each instance behaves the same, but the instance processes a set of independent data. The process of creating an object instance from a class is called instantiation (instantiation).
As we mentioned in the previous section, ECMAScript does not have a formal class. Instead, ECMA-262 describes the object definition as the formula for the object. This is a ECMAScript logical compromise, because the object definition is actually the object itself. Even if the class does not really exist, we also call the object definition a class, because most developers are more familiar with the term and functionally, the two are equivalent.
Using predefined objects is only part of the ability to object-oriented languages, and what's really powerful is being able to create your own dedicated objects. ECMAScript has many ways to create objects.
1. Original Mode
Because the properties of an object can be dynamically defined after the object is created, many developers write code similar to the following when JavaScript was first introduced:

var car = new Object (); 
Car.color = "Blue"; 
Car.doors = 4; 
Car.mpg =; 
Car.showcolor = function () {return 
  this.color; 
}; 
document.write (Car.showcolor ());//output: Blue 

In the above code, create the object car. Then give it a few properties: its color is blue, there are four doors, each gallon can run 25 miles. The last property is actually a pointer to a function, which means that the property is a method. After you execute this code, you can use the object car. There's a problem, though, that you might want to create multiple instances of car so that we can repeat a lot of similar code, which can be cumbersome.
2. Factory mode
To solve several of these similar object declarations, the developer created a factory way to create and return specific types of objects. This approach is designed to solve the problem of duplication of instantiated objects.
(1) Factory mode without parameters
For example, the function Createcar () can be used to encapsulate the actions listed earlier for creating a car object:

function Createcar () { 
var tempcar = new Object (); 
Tempcar.color = "Blue"; 
Tempcar.doors = 4; 
Tempcar.mpg =; 
Tempcar.showcolor = function () {return 
    this.color; 
 }; 
 return tempcar; 
}; 
var Car1 = Createcar (); 
var Car2 = Createcar (); 
document.write (Car1.showcolor () + "<br/>");/output: Blue 
document.write (Car2.showcolor ());//output: Blue 

Here, all the code in the first example is contained in the Createcar () function. In addition, there is a line of extra code that returns the Tempcar object as a function value. Call this function to create a new object and give it all the necessary properties to copy a car object that we described earlier. So, in this way, we can easily create two versions of the car object (CAR1 and Car2), and their properties are exactly the same.
(2) Factory mode with parameters
We can also modify the Createcar () function to pass the default values for each property instead of simply giving the property a default value:

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 () + "<br/>");/output: Red 
document.write (Car2.showcolor ());//output: Blue 

Add parameters to the Createcar () function to assign values to the color, doors, and mpg properties of the car object you want to create. This causes two objects to have the same properties, but with different property values.
The factory approach solves the problem of duplicate instantiation, but there is one problem, which is that in the previous example, every time the function Createcar () is called, a new function Showcolor () is created, meaning that each object has its own showcolor () version. In fact, each object shares the same function. Some developers define the object's methods outside of the factory function and then point to the method with attributes 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 () + "<br/>");/output: Red 
document.write (Car2.showcolor ());//output: Blue 

In the rewrite code above, the function Showcolor () is defined before the function Createcar (). Within Createcar (), give the object a pointer to the existing Showcolor () function. Functionally, this solves the problem of duplicating the creation of a function object, but semantically, the function is not much like the object's method. All of these problems have led to the emergence of developer-defined constructors.
3. Constructor Mode
Creating constructors is as easy as creating a factory-style function. The first step is to select the name of the constructor. By convention, the first letter of the name is capitalized so that it is separate from the name of the variable whose first letter is usually lowercase. In addition to this, the constructor looks much like a factory-style function. Take a look at 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", 4,23); 
var Car2 = new Car ("Blue", 3,25); 
document.write (Car1.showcolor () + "<br/>");/output: Red 
document.write (Car2.showcolor ());//output: Blue 

The following explains the difference between the above code and the factory approach. First, the object is not created within the constructor, but the This keyword is used. When you use the new operator to construct a function, you create an object before the first line of code is executed, and only this is used to access the object. You can then give the this property directly, by default, the return value of the constructor (you do not have to explicitly use the returns operator). Now, creating an object with the new operator and the object name car is more like the way a generic object is created in ECMAScript.
Like a factory-style function, the constructor repeats the build function, creating a separate version of the function for each object. However, similar to a factory-style function, you can override a constructor with an external function, and, similarly, do not have any semantic meaning. This is the advantage of the prototype approach that follows. In the next article, we will analyze the object-oriented prototyping approach and other integrated approaches in detail.

The above is the entire content of this article, I hope that the learning of JavaScript programming help.