How to define JavaScript objects _javascript tips

Source: Internet
Author: User
Tags mixed
There are a number of ways to define classes in JS:
1. Factory mode

function car () {
var ocar = new Object;
Ocar.color = "Blue";
Ocar.doors = 4;
Ocar.showcolor = function () {
document.write (This.color)
};
return ocar;
}

var car1 = car ();
var car2 = car ();

Calling this function creates a new object and assigns all of its properties and methods. Use this function to create objects with exactly the same 2 properties. Of course, my sister can pass the parameters to it to the revision of this way.

function car (color,door) {
var ocar = new Object;
Ocar.color = color;
Ocar.doors = door;
Ocar.showcolor = function () {
document.write (This.color)
};
return ocar;
}

var car1 = car ("Red", 4);
var car2 = car ("Blue", 4);
Car1.showcolor ()//output: "Red"
Car2.showcolor ()//output: "Blue"

You can now get objects with different values by passing different parameters to the function.

In the previous example, every time you call the function car (), you create Showcolor (), meaning that each object has its own Showcolor () method.
But in fact, each object bucket shares the same function.

Although you can define a method outside of a function, then point to the method by pointing the function's properties.

function Showcolor () {
alert (This.color);
}

function car () {
var ocar = new Object ();
Ocar.color = color;
Ocar.doors = door;
Ocar.showcolor = Showcolor;
return ocar;
}

But this does not look like a function method.

2. Constructor Mode

The constructor method is as simple as the factory approach, as follows:

function car (color,door) {
This.color = color;
This.doors = door;
This.showcolor = function () {
Alert (This.color)
};
}

var car1 = new Car ("Red", 4);
var car2 = new Car ("Blue", 4);

You can see that the constructor does not create an object inside the function, it is using the This keyword. Because the object was created when the constructor was invoked, the object property can only be accessed within the function using this.

Now use new to create objects that look like that! But it works the same way as the factory. Each call creates its own method for the object.

3. Prototype Mode

This method utilizes the prototype property of the object. The class name is first created with an empty function, and then all the properties and methods are assigned to the prototype property.

function car () {
}

Car.prototype.color = "Red";
Car.prototype.doors = 4;
Car.prototype.showColor = function () {
alert (This.color);
}

var car1 = new car ();
var car2 = new car ();

In this code, you first define an empty function and then define the object's properties by prototype the property. When this function is invoked, all the properties of the stereotype are immediately given to the object to be created, and all objects of that function hold a pointer to Showcolor (), which appears to belong to the same object syntactically.

However, this function has no parameters and cannot initialize properties by passing arguments, and must be created before the object can be changed to the default value of the property.

A serious problem with the prototype approach is that when the attribute is pointing to an object, an array is available.

function car () {
}

Car.prototype.color = "Red";
Car.prototype.doors = 4;
Car.prototype.arr = new Array ("A", "B");
Car.prototype.showColor = function () {
alert (This.color);
}

var car1 = new car ();
var car2 = new car ();

Car1.arr.push ("CC");

alert (Car1.arr); Output:aa,bb,cc
alert (Car2.arr); Output:aa,bb,cc

Here, because of the reference value of the array, two objects in the car point to the same number, so when you add a value in Car1, you can see it in the car2.

4, mixed constructor/prototype mode

A union is a constructor/prototype way to create objects, like other programming languages, by using constructors to define the object's non function properties, and to define the object's methods in a prototype way.

function car (color,door) {
This.color = color;
This.doors = door;
This.arr = new Array ("AA", "BB");
}
Car.prototype.showColor () {
alert (This.color);
}

var car1 = new Car ("Red", 4);
var car2 = new Car ("Blue", 4);

Car1.arr.push ("CC");

alert (Car1.arr); Output:aa,bb,cc
alert (Car2.arr); Output:aa,bb


5. Dynamic Prototyping mode

Dynamic prototypes are similar to the hybrid constructor/prototype approach. The only difference is where the object method is given.

function car (color,door) {
This.color = color;
This.doors = door;
This.arr = new Array ("AA", "BB");

if (typeof car._initialized = = "undefined") {
Car.prototype.showColor = function () {
alert (This.color);
};
Car._initialized = true;
}
}

The dynamic prototyping approach is to use a flag to determine whether a method has been given to the prototype. This ensures that the method is created only once

6. Mixed Factory mode

Its creator creates a fake constructor and returns only a new instance of another object.

function car () {
var ocar = new Object ();
Ocar.color = "Red";
Ocar.doors = 4;
Ocar.showcolor = function () {
Alert (This.color)
};
return ocar;
}

In contrast to the factory approach, the new operator is used in this way.


The above is the whole method of creating objects. The most widely used is the hybrid constructor/prototyping approach, in addition, dynamic prototyping is also popular. Functionally equivalent to the constructor/prototype approach.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.