JavaScript learns several ways to define objects in JS "Go"

Avascript learn 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" >var object = new Object (); object.name = "Zhangsan"; object.sayname = function (name) {       this.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 () {       var object = new Object ();       Object.username = "Zhangsan";       Object.password = "123";       Object.get = function ()       {              alert (this.username + "," + This.password);       }       return object;} var Object1 = CreateObject (), var object2 = CreateObject (); Object1.get ();

Improvement One: Adopt the Construction method with parameter:

function CreateObject (username, password) {       var object = new Object ();       Object.username = Username;       Object.password = password;       Object.get = function ()       {              alert (this.username + "," + This.password);       }       return 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.

function Get () {       alert (this.username + "," + This.password);} Function object has only one 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       , return object; var object = CreateObject ("Zhangsan", "123"), var object2 = CreateObject ("Lisi", "456"); Object.get (); Object2.get ();

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

Improved version: Add Parameters:

function person (username, password) {       this.username = Username;       This.password = password;       This.getinfo = function ()       {              alert (this.username + "," + This.password);}       } var person = new Person ("Zhangsan", "123");p Erson.getinfo ();

Four. Prototype ("prototype") mode

Example:

function person () {}person.prototype.username = "Zhangsan"; Person.prototype.password = "123"; Person.prototype.getInfo = function () {       alert (this.username + "," + This.password);} var person = new Person (), var person2 = 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:

function person () {}person.prototype.username = new Array (); Person.prototype.password = "123"; Person.prototype.getInfo = function () {       alert (this.username + "," + This.password);} var person = new Person (), var person2 = new Person ();p Erson.username.push ("Zhangsan");p Erson.username.push ("Lisi"); Person.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" >//uses the prototype + constructor method to define the object function 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");p 2.username.push ("Lisi");p. GetInfo ();p 2.getInfo ();</script>

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" >function person () {       this.username = "Zhangsan";       This.password = "123";       if (typeof Person.flag = = "undefined")       {              //This block code should only execute the              alert ("invoked") at the time of the first call;              Person.prototype.getInfo = function ()              {                     //This method is defined in the prototype and is shared by each object with                     alert (This.username + "," + This.password);              }              Person.flag = true;//After the first definition, the next object does not need to come in this code       }}var p = new person (), var p2 = new Person ();p. GetInfo ();p 2.getInfo ();</script>

Category: HTML5 basics

JavaScript learns several ways to define objects in JS "Go"