JavaScript learns several ways to define objects in JS

JavaScript learns several ways to define objects in JS

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 onew Object () object.name = "Zhangsan"function  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.get = function () {alert (this.username + "," + this.password);} return object;} var object1 = CreateObject ()  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< Span style= "color: #000000;" > CreateObject (username, password) {var object = new< Span style= "color: #000000;" > Object (); Object.username = username; Object.password = password; Object.get = get; // object; var 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.

functionPerson () {//Before executing the first line of code, the JS engine generates an object for usThis.username = "Zhangsan"this.password = "123" ; this.getinfo = function  () {alert (this.username + "," + this.password); } // here is a hidden return statement that returns the previously generated object //}// Generate object var person = new Person (); // Newperson.getinfo ();      

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 + "," + this .password);} newvar person2 = new person ();p Erson.username.push ("Zhangsan" );p Erson.username.push ("Lisi" );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 (); Span style= "color: #0000ff;" >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" >functionPerson () {This.username = "Zhangsan";This.password = "123";Iftypeof Person.flag = = "undefined") {//function () {//this.username + "," + this.password);} Person.flag = true; }} var p = new person (); Span style= "color: #0000ff;" >var P2 = new person ();p. GetInfo ();p 2.getInfo (); </ Script>               

References

Santhiya Garden Zhang Long teacher Java web video tutorial.

W3school JavaScript Tutorial: http://www.w3school.com.cn/js/index.asp

English version: http://www.w3schools.com/js/default.asp

JavaScript learns several ways to define objects in JS