JS create objects in several ways

Source: Internet
Author: User

First, the factory model
function Createperson (name, age) {    varnew  Object ();     = name;     = Age ;     function () {         alert (this. Name);    };     return o;
}

Each call to this function returns an object that contains two properties and a method.

Second, the structural function mode

The constructors in JS can be used to create specific types of objects, such as Object and array, which are native constructors that automatically appear in the execution environment at run time. In addition, you can create custom constructors that define properties and methods for custom object types.

1 functionPerson (name,age) {2        This. Name =name;3        This. Age =Age ;4        This. Say =function(){5Alert This. Name);6       }7  }8 varPerson1 =NewPerson ("Xiaoming", "18");

Constructors are also functions, except that they are called differently, and any function, as long as it is called by the new operator, can be used as a constructor, and not by the new operator.

1, as a constructor function

1 var New  Person ("xiaoming");  2 person1.say ();  //

2, as a normal function

1 person ("Xiaozhu");   // Add to Window 2 Window.say ();    //
Third, prototype mode

Each function we create has a prototype (prototype) attribute, which is a pointer to an object that contains the properties and methods shared by all instances. Literally, prototype is the prototype object of an object instance created by invoking the constructor. The advantage of using it is that you can have all object instances share the properties and methods contained in the prototype.

1         functionPerson () {}2Person.prototype.name= "Xiaoming";3Person.prototype.age=18;4person.prototype.say=function(){5Alert This. Name);6         }7         varperson1=NewPerson ();8Person1.say ();//xiaoming9         varPerson2 =NewPerson ();TenPerson2.say ();//xiaoming

However, when a property containing a reference type value is included, a problem occurs;

1         functionPerson () {}2Person.prototype.name= "Xiaoming";3Person.prototype.age=18;4person.prototype.eat=[' apples ', ' oranges '];5person.prototype.say=function(){6Alert This. Name);7         }8         varperson1=NewPerson ();9         Tenalert (person1.eat);//Apple oranges OnePerson1.eat.push ("Banana"); A         varPerson2 =NewPerson (); -alert (person2.eat);//apples, oranges, bananas .

As you can see, the Eat property is the value of the reference type, and when Person1 changes the Eat array, it is reflected in the Person2, but this is not the result we want. Keep looking.

Iv. using constructors and prototype patterns in combination

This approach can greatly solve the problem caused by using constructors or prototype patterns alone. This is the most widely used method of all time; combined, constructors are used to define instance properties, and prototype patterns are used to define methods and shared properties. Each instance will have its own copy of the instance properties, and at the same time share a reference to the method, to maximize memory savings.

1         functionPerson (name,age) {2              This. name=name;3              This. age=Age ;4              This. eat=[' apples ', ' oranges '];5         }6person.prototype.say=function(){7Alert This. Name);8         }9         varperson1=NewPerson ("xiaoming", 18);Tenalert (person1.eat);//Apple oranges OnePerson1.eat.push ("Banana"); A         varPerson2 =NewPerson (); -alert (person2.eat);//Apple oranges

JS create objects in several ways

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.