JavaScript is a dynamic language, you can add attributes to objects at runtime, or you can delete attributes to objects.
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
/*
//01. The first way to define an object
var object =new Object();
alert(object.username);
//01.1 Add attribute username
object["username"]="liujianglong";
//object.username="liujl";
alert(object.username);
//01.2 Delete the attribute username
delete object.username;//username attribute has been deleted from the object object
alert(object.username);
*/
//02. The second way to define objects - the most common way to define objects in javascript
var object={name:"zhangsan",age:10,sex:"fale"};
alert(object.name);
alert(object.age);
alert(object.sex);
</script>
</head>
<body>
</body>
</html>
Property name: The method name is also OK. Because the function itself is an object
javascript array sorting
The code copy 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 ways to define objects in javascript (javascript does not have the concept of classes, only objects)
The first method: expand its properties and methods based on existing objects
The code copy is as follows:
<script type="text/javascript">
//01. Expand its properties 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 concept of class like Java. If you write a class, then new can get an object with these properties and methods.
At this time, if you want to have object2, you can only write another copy of the code mentioned above, which is not very good.
The second method: factory method
Similar to static factory methods in java.
The code copy 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>
There are disadvantages in creating objects in the above method (each object has a get method, which wastes memory), and the improved factory method (all objects share a get method):
The code copy 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: The method brackets are not written here
return object;
}
//Create an object through factory method
var object1=createObject("zhangsan","123");
var object2=createObject("lisi","345");
//Calling the get method
object1.get();
object2.get();
</script>
</head>
<body>
</body>
</html>
The third method: Defining an object by constructor
The code copy 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 used to return the previously generated object [this is different from the factory pattern]
}
var person=new Person("zhangsan","123");
person.get();
</script>
</head>
<body>
</body>
</html>
The fourth method: Create an object in the prototype method
prototype is a property in an object object, and all person objects can also have the property prototype.
You can add some properties and methods to the object's prototype.
Disadvantages of simply using prototypes to create objects: ① Cannot pass parameters, you can only change the value after the object is created
②Program errors may occur
The code copy 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>
The code copy 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>
By simply defining an object using the prototype, you can no longer assign initial values to attributes in the constructor, and you can only change the attribute values after the object is generated.
The fifth method: Use prototype + constructor to define the object-----------------
The properties between objects do not interfere with each other
Share the same method among objects
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//Use the prototype + constructor method to define the object
function Person(){
//Attribute definition in the constructor
this.username=new Array();
this.password="123";
}
//The method is defined 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>
The sixth method: Dynamic prototype method--------Recommended use
In the constructor, all objects share a method through flag quantity, and each object has its own attributes.
The code copy 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>