Detailed explanation of creating objects based on object-oriented JavaScript (1)_javascript skills

This time we will study JavaScript object-oriented technology in depth. Before learning, it is necessary to explain some object-oriented terms. This is what all object-oriented languages ​​have in common. There are several object-oriented terms:
1. Object
ECMA-262 defines an object as "an unordered collection of attributes, each attribute stores a primitive value, object or function". Strictly speaking, this means that an object is an array of values ​​in no particular order. Although ECMAScript defines objects this way, its more general definition is a code-based representation of a noun (a person, place, or thing).
2. Category
Every object is defined by a class, which can be thought of as the recipe for an object. A class defines not only the object's interface (the properties and methods that developers access), but also the object's inner workings (the code that makes the properties and methods work). Both compilers and interpreters build objects based on class specifications.
3. Examples
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 a class can generate comes from the physical memory of the machine the code is running on. Each instance behaves the same, but the instance handles an independent set of data. The process of creating object instances from a class is called instantiation.
In the previous chapter, we mentioned that ECMAScript does not have formal classes. In contrast, ECMA-262 describes object definitions as recipes for objects. This is a compromise in ECMAScript logic, since the object definition is actually the object itself. Even though a class doesn't really exist, we call the object definition a class because most developers are more familiar with this terminology and because the two are functionally equivalent.
Using predefined objects is only part of the capabilities of an object-oriented language. Its real power lies in the ability to create your own dedicated objects. ECMAScript has many methods for creating objects.
1. Original method
Because an object’s properties can be defined dynamically after the object is created, many developers wrote code similar to the following when JavaScript was 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());//输出：blue 

In the above code, create the object Car. Then give it a few attributes: It's blue, has four doors, and gets 25 miles per gallon. The last attribute is actually a pointer to a function, meaning the attribute is a method. After executing this code, the object Car can be used. However, there is a problem here, that is, we may need to create multiple Car instances, which will cause us to repeat a lot of similar code, which will be very troublesome.
2. Factory method
To solve the above problem of multiple similar object declarations, developers created factories that can create and return objects of specific types. This method is to solve the problem of large amounts of duplication of instantiated objects.
(1) Factory method without parameters
For example, the function createCar() can be used to encapsulate the previously listed operations of creating a Car object:

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()+"<br/>");//输出：blue 
document.write(Car2.showColor());//输出：blue 

Here, all the code from the first example is contained in the createCar() function. Additionally, there is an extra line of code that returns a TempCar object as the function value. Calling this function will create a new object and give it all the necessary attributes, copying the Car object we explained earlier. So with this approach we can easily create two versions of the Car object (Car1 and Car2) with exactly the same properties.
(2) Factory method with parameters
We can also modify the createCar() function to pass it the default value of each attribute, instead of simply giving the attribute 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/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

By adding parameters to the createCar() function, you can assign values ​​to the color, doors and mpg attributes of the Car object to be created. This makes two objects have the same properties, 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, every time the function createCar() is called, a new function showColor() must be created, which means that each object has its own showColor. () Version. In fact, every object shares the same function. Some developers define the object's method outside the factory function and then point to the method through an attribute 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/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       在上面这段重写的代码中，在函数 createCar()之前定义了函数 showColor()。在createCar()内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。
3、构造函数方式
       创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂方式的函数。请看下面的例子：

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/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象，而是使用this关键字。使用new运算符构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。现在，用new运算符和对象名Car创建对象，就更像 ECMAScript 中一般对象的创建方式了。
      就像工厂方式的函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂方式的函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。在下篇文章中会详细的分析面向对象的原型方式以及其他综合的方式。

以上就是本文的全部内容，希望对大家的学习javascript程序设计有所帮助。