Six ways to create a custom object in JavaScript

Source: Internet
Author: User

Custom objects: Objects that you define in JavaScript

The first way: the way of the factory

function Createcar (scolor,idoors,impg) {

var otempcar = new Object;

Otempcar.color = Scolor;

Otempcar.doors = idoors;

Otempcar.mpg = Impg;

Otempcar.showcolor = function () {//Internal method

alert (This.color);

};

return otempcar;

}

var oCar1 = Createcar ();

var oCar2 = Createcar ();

The second way: how to construct a function

The first step: Define the constructors and methods of the object

function member (Name,gender)//constructor

{

The JS engine generates an object for us before executing the first line of code.

This.name=name;

This.gender=gender;

This.display=display; We use an external reference, or we can use an internal approach

Here is a hidden return statement that returns the object that was previously generated.

}

function display ()//method

{

Document.writeln (THIS.name + ":" +this.gender+ "<br>");

}

Step Two: Create an instance of an object

var obj=new member ("Liu Ease", "male");//new Creates and returns an object.

Obj.display ();

Note: You can add properties to an object instance to change the instance, but other instances generated with the same constructor do not include these properties, such as:

Obj.email= "asdfsa@126.com";/only obj This instance has an email attribute

Add the attribute ' age ' to the member prototype object so that all instances of the member object can have the attribute, including those instances that have already been generated.

Member.prototype.age= "20";

Note: When using the factory and constructor methods, if the method is defined inside the factory or constructor, the generated function is duplicated when multiple objects are created. We can define the method in the factory or constructor as an external reference. But semantically, a function is not much like a method of an object.

The Third Way: Prototype mode

function car () {

}

Car.prototype.color = "Blue";

Car.prototype.doors = 4;

Car.prototype.mpg = 25;

Car.prototype.showColor = function () {

document.write (This.color);

};

var oCar1 = new car ();

var oCar2 = new car ();

This means that the default value of the property must be changed after the object is created, and that all objects share properties and methods in the prototype, and that changes in the properties and methods of one object are reflected in other objects.

The fourth Way: mixed constructor/prototype mode

That is, you define all of the object's non function properties with the constructor, and you define the object's function properties (methods) in a prototype manner.

function car (scolor,idoors,impg) {

This.color = Scolor;

This.doors = idoors;

This.mpg = Impg;

This.drivers = new Array ("Mike", "John");

}

Car.prototype.showColor = function () {

alert (This.color);

};

var oCar1 = new Car ("Red", 4,23);

var oCar2 = new Car ("Blue", 3,25);

OCar1.drivers.push ("Bill");

alert (ocar1.drivers); Output "Mike,john,bill"

alert (ocar2.drivers); Output "Mike,john"

This means that only one instance of the Showcolor () function is created, so there is no memory waste, and each object has its own properties. But most programmers think this approach does not solve the problem of object-oriented encapsulation very well. So the dynamic prototyping method is produced.

The fifth kind: Dynamic prototype method

function car (scolor,idoors,impg) {

This.color = Scolor;

This.doors = idoors;

This.mpg = Impg;

This.drivers = new Array ("Mike", "John");

if (typeof car._initialized = = "undefined") {

Car.prototype.showColor = function () {

alert (This.color);

};

Car._initialized = true;

}

}

var oCar1 = new Car ("Red", 4,23);

var oCar2 = new Car ("Blue", 3,25);

OCar1.drivers.push ("Bill");

Document.writeln (ocar1.drivers);

Document.writeln (ocar2.drivers);

Note: The only difference between a mixed constructor/prototype approach is the placement of the object method. The method uses flags (_initialized) to determine whether any method has been given to the prototype.

The sixth kind: The key value pairs the way

var obj={username: "Liuanxin", Password: "123"}

The red flag above is the most common way to create a custom object in JavaScript.

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.