Home > Developer > JavaScript
The javascript constructor defines the object and the javascript constructor.
Javascript is a dynamic language. You can add attributes to an object at runtime, or delete attributes to an object.
Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript">
/*
// 01. Define the first method of the object
Var object = new Object ();
Alert (object. username );
// 01.1 Add the username attribute
Object ["username"] = "liujianglong ";
// Object. username = "liujl ";
Alert (object. username );
// 01.2 Delete the property username
Delete object. username; // The username attribute has been deleted from the object.
Alert (object. username );
*/
// 02. Define an object method 2-the most common way to define an object in javascript
Var object = {name: "zhangsan", age: 10, sex: "fale "};
Alert (object. name );
Alert (object. age );
Alert (object. sex );
</Script>
</Head>
<Body>
</Body>
</Html>
Attribute name: The method name is also acceptable, because the function itself is an object.
Javascript array sorting
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
Var array = [1, 3, 25];
/////////////////////////////////
Var compare = function (num1, num2 ){
Var temp1 = parseInt (num1 );
Var temp2 = parseInt (num2 );
If (temp1 <temp2 ){
Return-1;
} Else if (temp1 = temp2 ){
Return 0;
} Else {
Return 1;
}
}
// Array. sort (compare); // 01. The function name is an object reference.
////////////////////////////////
// 02. Anonymous Function Method //////////////////
Array. sort (function c (num1, num2 ){
Var temp1 = parseInt (num1 );
Var temp2 = parseInt (num2 );
If (temp1 <temp2 ){
Return-1;
} Else if (temp1 = temp2 ){
Return 0;
} Else {
Return 1;
}
});
/////////////////////////////////
Alert (array );
</Script>
</Head>
<Body>
</Body>
</Html>
Several Methods for defining objects in javascript (javascript does not have the concept of classes, but only objects)
Method 1: Expand attributes and methods based on existing objects
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// 01. Extend attributes and methods based on existing objects
Var object = new Object ();
Object. username = "zhangsan ";
Object. sayName = function (name ){
This. username = name;
Alert (this. username );
}
Alert (object. username );
Object. sayName ("lisi ");
Alert (object. username );
</Script>
This method has limitations, because javascript does not have the class concept as java does. Write a class, and then new can get an object with these attributes and methods.
At this time, if you want to have object2, you can only write the code above, which is not good.
Method 2: factory Mode
Similar to the static factory method in java.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
// Object factory Method
Var createObject = function (){
Var object = new Object ();
Object. username = "zhangsan ";
Object. password = "123 ";
Object. get = function (){
Alert (this. username + "," + object. password );
}
Return object;
}
Var obj1 = createObject ();
Var obj2 = createObject ();
Obj1.get ();
// Modify the password of object 2
Obj2 ["password"] = "123456 ";
Obj2.get ();
</Script>
</Head>
<Body>
</Body>
</Html>
The above method has drawbacks in object creation (each object has a get method, which wastes memory), and the improved factory method (all objects share a get method ):
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
// Get method shared by all objects
Var get = function (){
Alert (this. username + "," + this. password );
}
// Object factory Method
Var createObject = function (username, password ){
Var object = new Object ();
Object. username = username;
Object. password = password;
Object. get = get; // Note: No method brackets are written here.
Return object;
}
// Create an object using the factory Method
Var object1 = createObject ("zhangsan", "123 ");
Var object2 = createObject ("lisi", "345 ");
// Call the get Method
Object1.get ();
Object2.get ();
</Script>
</Head>
<Body>
</Body>
</Html>
Method 3: constructor to define objects
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
Var get = function (){
Alert (this. username + "," + this. password );
}
Function Person (username, password ){
// Before executing the first line of code, the js engine will generate an object for us
This. username = username;
This. password = password;
This. get = get;
// Here, there is a hidden return statement to return the previously generated object [This is different from the factory mode]
}
Var person = new Person ("zhangsan", "123 ");
Person. get ();
</Script>
</Head>
<Body>
</Body>
</Html>
Method 4: Create an object using Prototype
Prototype is an attribute in an object. All person objects can also have the prototype attribute.
You can add some attributes and methods to the object prototype.
Disadvantages of creating an object by using a prototype: ① The parameter cannot be passed, and its value can only be changed after the object is created.
② May cause program errors
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
Function Person (){
}
Person. prototype. username = "zhangsan ";
Person. prototype. password = "123 ";
Person. prototype. getInfo = function (){
Alert (this. username + "," + this. password );
}
Var person1 = new Person ();
Var person2 = new Person ();
Person1.username = "lisi ";
Person1.getInfo ();
Person2.getInfo ();
</Script>
</Head>
<Body>
</Body>
</Html>
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
Function Person (){
}
Person. prototype. username = new Array ();
Person. prototype. password = "123 ";
Person. prototype. getInfo = function (){
Alert (this. username + "," + this. password );
}
Var person1 = new Person ();
Var person2 = new Person ();
Person1.username. push ("wanglaowu ");
Person1.username. push ("wanglaowu2 ");
Person2.password = "456 ";
Person1.getInfo ();
Person2.getInfo ();
</Script>
</Head>
<Body>
</Body>
</Html>
If you define an object using prototype, you cannot assign an initial value to the attribute in the constructor. You can only change the attribute value after the object is generated.
Method 5: Define objects using prototype + constructor ---- recommended
Attributes between objects do not interfere with each other
Share the same method between objects
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
// Define objects using prototype + Constructor
Function Person (){
// Attribute definition in Constructor
This. username = new Array ();
This. password = "123 ";
}
// Define the method in the prototype
Person. prototype. getInfo = function (){
Alert (this. username + "," + this. password );
}
Var p1 = new Person ();
Var p2 = new Person ();
P1.username. push ("zhangsan ");
P2.username. push ("lisi ");
P1.getInfo ();
P2.getInfo ();
</Script>
</Head>
<Body>
</Body>
</Html>
Method 6: Dynamic Prototype ---- recommended
In the constructor, all objects share a method with the flag, and each object has its own attributes.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
Var Person = function (username, password ){
This. username = username;
This. password = password;
If (typeof Person. flag = "undefined "){
Alert ("invoked ");
Person. prototype. getInfo = function (){
Alert (this. username + "," + this. password );
}
Person. flag = true;
}
}
Var p1 = new Person ("zhangsan", "123 ");
Var p2 = new Person ("lisi", "456 ");
P1.getInfo ();
P2.getInfo ();
</Script>
</Head>
<Body>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
