(vi) several ways of defining objects in Javascriptjs

Tag: Bar causes 1.5 needs PYc str typeof copy username

JavaScript learns several ways to define objects in JS

Transferred from: http://www.cnblogs.com/mengdd/p/3697255.html

There is no concept of class in javascript, only Objects.

　　There are several ways to define an object in Javascript:

1. Extending its properties and methods based on existing objects

2. Factory mode

3. How to construct a function

4. Prototype ("prototype") mode

5. Dynamic Prototyping Mode

I. Extending its properties and methods based on existing objects

<script type= "text/javascript" >new Object () object.name = "zhangsan"functionthis.name = name; Alert (this. name);} Object.sayname ("lisi");</script>       

The disadvantage of this approach: the reusability of such objects is not strong, and if more than one object needs to be used, its properties and methods need to be re-extended.

two. Factory mode

Function CreateObject () {       new Object ();       Object.username = "zhangsan"; object.password = "123"function() {alert (thisreturn object;} var object1 = CreateObject ();  var object2 = CreateObject (); object1.get ();            

Improvement One: adopt the construction method with Parameter:

Function CreateObject (username, password) {       new Object ();       Object.username = username; Object.password =function() {alert (thisreturn object;} var object1 = CreateObject ("zhangsan", "123"); object1.get ();         

Improved two: let multiple objects share function objects

This way, you do not have to generate a function object for each Object.

functionGet () {alert (This.username + "," +This.password);} // Function object only one copy function createobject (username, password) {var object = new Object (); object.username = username; Object.password = password; object.get = get; // Each Object's function object points to the same function object  Returnvar object = CreateObject ("zhangsan", "123" var object2 = CreateObject ("lisi", "456"  

Pros: Let a function object be shared by multiple objects , rather than having a function object for each Object.

Disadvantage: the object and its method definitions are separated, which can cause misunderstanding and misuse.

Three. How to construct a function

Constructors are defined in the same way as normal custom functions.

Press CTRL + C to copy the code<textarea style="width: 689px; height: 363.2px; font-family: Courier New; font-size: 12px; line-height: 1.5"></textarea>Press CTRL + C to copy the code

Parsing: Be sure to define the method with This.getinfo = function (), Otherwise person.getinfo (); the method defined in person cannot be called.

Improved version: add parameters:

function Person (username, password) {       this.username = username;       This.password =function() {alert (this. password);}} New Person ("zhangsan", "123");p erson.getinfo ();         

Four. prototype ("prototype") mode

Example:

function Person () {}person.prototype.username = "zhangsan"; Person.prototype.password = "123"function() {alert (this. password);} New Person ();  New Person ();p erson.username = "lisi";p erson.getinfo ();p erson2.getinfo ();      

Disadvantages of using Prototypes:

1. Cannot pass parameters;

2. It is possible to cause a program Error.

If you use a prototype to define an object, all of the generated objects share the properties in the prototype , so that an object changes the property and is reflected in other Objects.

　　Simply using a prototype to define an object cannot assign an initial value to a property in a constructor, but only after the object has been generated to change the property Values.

　　For example, username changes to an array:

functionPerson () {}person.prototype.username =NewArray (); Person.prototype.password = "123"; Person.prototype.getInfo =function() {alert (this.username + "," + thisvar person = new person (); Span style= "color: #0000ff" >var person2 = new person (); Person.username.push ("zhangsan" );p erson.password = "456" ;p erson.getinfo (); // output: zhangsan,lisi, 456person2.getinfo (); // output: zhangsan,lisi, 123/ / Although the Person2 object is not modified, its name and person are the same, which is Zhangsan,lisi    

This is because, using the prototype, person and Person2 point to the same prototype, which corresponds to the same property Object.

For reference types (such as arrays), two objects point to the same reference, so a change to one affects the Other.

In the case of a string (literal constant value), the re-assignment points to another reference, so the modifications do not affect each other.

Improvements to the prototyping Approach:

Using the Prototype + constructor method to define objects, the properties between objects do not interfere with each other, and the same method is shared among Objects.

<script type= "text/javascript" >//Defining objects using the Prototype + constructor methodfunction person () {this.username =  New Array (); this.password = "123" ;} Person.prototype.getInfo = function () {alert (this.username + "," + this.password);} var p = new person (); var p2 = new person (); P.username.push ("zhangsan"          

Five. Dynamic Prototyping mode

In the constructor, the flags allow all objects to share a method , and each object has its own properties.

<script type= "text/javascript" >functionPerson () {This.username = "zhangsan";This.password = "123";Iftypeof Person.flag = = "undefined") {// This block code should only be executed at the first call ("invoked" function () {// This method is defined in the prototype and is shared by each object with alert (this.password);} Person.flag = true;  After the first definition, the next object does not need to come in this code again }} var p = new person (); var p2 = new person ();p. GetInfo (); P2.getinfo (); </script>            

(vi) several ways of defining objects in Javascriptjs (rpm)