JavaScript Basic Learning-Custom objects (2)

Custom Objects

Defining a Class or object
1. Factory mode
Create Object Car

1 varOcar =NewObject;2Ocar.color = "Red";3Ocar.doors = 4;4Ocar.mpg = 23;5Ocar.showcolor =function(){6Alert This. Corlor);7 };8 9 Create multiple carTen functioncreatecar (color, doors, MPG) { One     varTempcar =NewObject; ATempcar.color =color; -Tempcar.doors =doors; -Tempcar.mpg =mpg; theTempcar.showcolor =function () { -Alert This. Color) -     }; -    returnTempcar; + } -  + varCAR1 = Createcar ("Red", 4, 23); A varCAR2 = Createcar ("Blue", 3, 25); atCar1.showcolor ();//outputs "Red" -Car2.showcolor ();//outputs "Blue"

In this example, each call to the function Createcar () creates a new function, Showcolor (), which means that each object has its own version of Showcolor (), and in fact each object shares the same function.
Some developers can avoid this problem by defining the method of the object outside the factory function and then pointing to the method through the attribute.

1 functionShowcolor () {2Alert This. color);3 }4 functioncreatecar (color, doors, MPG) {5     varTempcar =NewObject;6Tempcar.color =color;7Tempcar.doors =doors;8Tempcar.mpg =mpg;9Tempcar.showcolor =Showcolor;Ten     returnTempcar; One } A  - varCAR1 = Createcar ("Red", 4, 23); - varCAR2 = Createcar ("Blue", 3, 25); theCar1.showcolor ();//outputs "Red" -Car2.showcolor ();//outputs "Blue"

Functionally, this solves the problem of repeatedly creating a function object, but the function does not look like the object's method. All of these issues lead to the emergence of developer-defined constructors.

2. Constructor methods

1 functionCar (Scolor, idoors, impg) {2      This. color =Scolor;3      This. Doors =idoors;4      This. mpg =Impg;5      This. Showcolor =function () {6Alert This. Color)7     };8 }9 Ten varOCAR1 =NewCar ("Red", 4, 23); One varOCAR2 =NewCar ("Blue", 3, 25); AOcar1.showcolor ();//outputs "Red" -Ocar2.showcolor ();//outputs "Blue"

Just like the factory function, the constructor repeats the generated function, creating a separate version of the function for each object. However, the constructor can also be overridden with an external function, which, again, makes no sense in semantics.

3. Prototype mode

1 functionCar () {2 }3Car.prototype.color = "Red";4Car.prototype.doors= 4;5car.prototype.mpg= 23;6Car.prototype.showColor =function(){7Alert This. color);8 }9 Ten varOCAR1 =NewCar (); One varOCAR2 =NewCar ();

It solves two problems that exist in the previous two ways. But not very satisfactory. First, this constructor has no parameters. When using a prototype, you cannot pass parameters to initialize the value of a property through a constructor, which is annoying but not finished, and the real problem occurs when the property points to the object, not the function. Consider the following example:

1 functionCar () {2 }3Car.prototype.color = "Red";4Car.prototype.doors= 4;5car.prototype.mpg= 23;6Car.prototype.drivers =NewArray ("Mike", "Sue");7Car.prototype.showColor =function(){8Alert This. color);9 }Ten  One varOCAR1 =NewCar (); A varOCAR2 =NewCar (); -OCar1.drivers.push ("Matt"); -alert (ocar1.drivers);//outputs "Mike,sue,matt" thealert (ocar2.drivers);//outputs "Mike,sue,matt" -  -4. Hybrid constructor/prototype mode - functionCar (Scolor, idoors, impg) { +      This. color =Scolor; -      This. Doors =idoors; +      This. mpg =Impg; A      This. Drivers =NewArray ("Mike", "Sue"); at } -  -Car.prototype.showColor =function () { -Alert This. color); - }; -  in varOCAR1 =NewCar ("Red", 4, 23); - varOCAR2 =NewCar ("Blue", 3, 25); to  +OCar1.drivers.push ("Matt"); -  thealert (ocar1.drivers);//outputs "Mike,sue,matt" *alert (ocar2.drivers);//outputs "Mike,sue"

Now it's more like creating a generic object. All non-function properties are created in constructors, which means that the parameters of the constructor can be given the default value of the property. Because only one instance of the Showcolor () function is created, there is no memory waste.

5. Dynamic Prototyping method

1 functionCar (Scolor, idoors, impg) {2      This. color =Scolor;3      This. Doors =idoors;4      This. mpg =Impg;5      This. Drivers =NewArray ("Mike", "Sue");6 7     if(typeofcar._initialized = = "undefined") {8 9Car.prototype.showColor =function () {TenAlert This. color); One         }; A  -car._initialized =true; -     } the } -  -  - varOCAR1 =NewCar ("Red", 4, 23); + varOCAR2 =NewCar ("Blue", 3, 25); -  +OCar1.drivers.push ("Matt"); A  atalert (ocar1.drivers);//outputs "Mike,sue,matt" -alert (ocar2.drivers);//outputs "Mike,sue"

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 a function attribute is defined using a prototype attribute. The only difference is where the object method is given.

6. Hybrid Plant Approach
This approach is usually a workaround when the previous method cannot be applied. Its purpose is to create a false constructor that returns only a new instance of another object.

function Car () {    varnew  Object;     = "Red";     = 4;     = all;     function () {        alert (this. color)    };    return Tempcar;}

Unlike the classic approach, this approach uses the new operator to make it look like a real constructor.

7. Which method to use
As mentioned earlier, the most widely used is the hybrid constructor/prototype approach. , dynamic prototyping methods are also popular, functionally equivalent to the former, can be used in either of these two ways.

Second, modify the object
1. Create a new method
You can use the prototype property to define a new method for any existing class, just as you would with your own class.
Cases:

function (vitem) {   for (var i=0;i<this. length;i++) {      if   This [i]) {         return  i;      }   }    -1;}

Finally, if you want to add a new method to each local object in ECMAScript, you must define it on the prototype property of the object.

2. Redefining an existing method
Just as you can define a new method for your class, you can redefine an existing method. The function name is just a pointer to a function, so it can be easily pointed to other functions.
Such as

1Function.prototype.toString =function(){2    return"Function Code hidden";3 }4 functionSayhi () {5Alert ("Hi");6 }7Alert (sayhi.tostring ());//outputs "Function code hidden"8 9  Ten  One  

JavaScript Basic Learning-Custom objects (2)