Home>

This time we will learn more about javascript object-oriented technology,Before studying,It is necessary to explain some object-oriented terms.This is also common to all object-oriented languages.There are several object-oriented terms:

I.Objectecma-262 defines an object as "an unordered collection of attributes,Each property holds a primitive value, object, or function. "Strictly speaking,This means that the object is an array of values ​​in no particular order.Although ecmascript defines objects like this,But its more general definition is a representation of a code-based noun (person, place, or thing).

Class

Each object is defined by a class,Think of a class as a recipe for an object.The class must not only define the interface of the object (properties and methods accessed by the developer), but also define the internal work of the object (the code that makes properties and methods work). Both the compiler and the interpreter build the object according to the description of the class.

Third, examples

When a program creates an object using a class,The resulting object is called an instance of the class. The only limitation on the number of objects generated by a class comes from the physical memory of the machine on which the code is running.Each instance behaves the same,But the instance processes a separate set of data.The process of creating an instance of an object from a class is called instantiation.

We mentioned in the previous chapter,ecmascript has no formal classes.In contrast, ecma-262 describes object definitions as object recipes.This is a compromise in ecmascript logic,Because the object definition is actually the object itself.Even if the class doesn't really exist,We also call object definitions classesBecause most developers are more familiar with this term,And functionally speaking,The two are equivalent.

Using predefined objects is only part of the power of object-oriented languages,Its real power lies in its ability to create its own dedicated objects.ecmascript has many methods for creating objects.

1.Original way

Because the properties of an object can be defined dynamically after the object is created,All 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 ());//Output:blue

In the above code,Create the object car. Then set a few properties on it:its color is blue,There are four doors,You can run 25 miles per gallon of fuel. The last property is actually a pointer to a function,Means that the property is a method.After executing this code,You can use the object car. But there is a problem here,It may be necessary to create multiple instances of car, which causes us to repeat many similar codes,This will be troublesome.

2. Factory method

To solve the above-mentioned problems with similar object declarations,Developers have created factory methods that create and return objects of a specific type.This way is to solve the problem of instantiation of a large number of duplicate objects.

(1) Factory mode without parameters

For example, the function createcar () can be used to encapsulate the operations for creating a car object listed earlier:

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 />");//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 an extra line of code,Returns a tempcar object as a function value.Call this function,A new object will be created,And give it all the necessary attributes,Copy out a car object that we explained earlier. So with this method,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 and pass it the default value of each property,Rather than simply assigning 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,You can assign values ​​to the color, doors, and mpg properties of the car object to be created.This makes both objects have the same properties,There are different attribute values.

The factory approach solves the problem of repeated instantiation,But there is still a problem,That is the previous example,Each time the function createcar () is called, a new function showcolor () is created, meaning that each object has its own version of showcolor (). In fact,Every object shares the same function.Some developers define methods of objects outside of factory functions,Then point to the method by attributes,Thus avoiding 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 rewritten code above,The function showcolor () is defined before the function createcar (). Inside createcar (), give the object a pointer to an existing showcolor () function.Functionally,This solves the problem of repeatedly creating function objects;But semantically,This function is not much like a method of an object.All of these issues have led to the emergence of developer-defined constructors.

Constructor function

Creating a constructor is as easy as creating a factory-style function.The first step is to choose the name of the constructor.By convention,The first letter of the name is capitalized,So that it is separate from the variable name, which is usually lowercase.Apart from this difference,Constructors look a lot like factory-style functions.Consider 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 method.First no object is created inside the constructor,Instead, use the this keyword. When using the new operator constructor,Create an object before executing the first line of code,The object can only be accessed with this.You can then directly assign the this property, which is the return value of the constructor by default (you don't have to explicitly use the return operator). Now, create an object with the new operator and the object name car,It's more like how general objects are created in ecmascript.

  • Previous Detailed PHP method to obtain image information
  • Next JS submission form example analysis