Understanding objects in JavaScript Recommended_javascript skills

There is no class definition in JavaScript, and there is no fixed template when creating an object. New properties and methods can be created dynamically. When dynamically creating a new property, all we can do is create a new value for this property. The following example is Create an object and add two attributes, x and y.

Copy code The code is as follows:

var Programmer = new Object();
Programmer .name = "Young";
Programmer.age = 25;
alert(Programmer.name " : " Programmer.age);

JavaScript objects are completely different from c# or vb objects , a JavaScript object can be viewed as a collection of key/value pairs, and an object property is accessed using the object.property name. We can think of JavaScript objects as the Dictionary class in the .NET framework, and we can create object properties through the "[]" operator.

Copy code The code is as follows:

var Programmer = new Object();
Programmer ["name"] = "Young";
Programmer["age"]= 25;
document.getElementById("message").innerHTML=Programmer["name"] " : " Programmer["age" ];
alert(Programmer.name " : " Programmer.age); Through the above example, we can find that the two methods of accessing objects are the same. If a property has not been created, "undefined" will be returned.

We can also add the function as the value of the key/value pair set, thus constructing it as a method of the object,

Copy code The code is as follows:

var Programmer = new Object();
Programmer["name"] = "Young";
Programmer.age= 25 ;
Programmer.speak=function(){
alert(this.name " : " this["age"]);
}
Programmer.speak();

In the above code, we use "." and "[]" interchangeably to define accessible properties and methods, or = the two methods are the same. Sometimes these operators can cause some conceptual confusion. Setting a new value for an existing property is not very clear. Below we introduce the third syntax to express our intention more clearly.

Copy code The code is as follows:

var Programmer =
{
name: "Young",
age : 25,
speak : function(){ alert(this.name " : " this.age); }
}
Programmer.speak(); The above code It expresses the beginning and end of object initialization more clearly. We can also use this method to nest objects in exclusive objects. var Programmer =
{
Figure : {name : "Young" , age : 25 },
Company : {name : " Arcadia" , address : "ShenZheng"},
speak : function( ){
alert("name:" this.Figure.name "nage:" this.Figure.age "nCompany:" this.Company.name " of

" this.Company.address);
}
};
Programmer.speak();

This syntax is very popular because of its clear intention and compact code layout. You can use it in various popular Seen in JavaScript frameworks, including JavaScript Object Notation (JSON) currently popular on the Internet, JSON is a lightweight data exchange format that is also easy to machine parse and generate, and the syntax is also very strict. JSON allows JavaScript to exchange data on the Internet. We can use eval to convert JSON objects into local JavaScript objects.

Copy code The code is as follows:

var Programmer="({name: 'Young', age : 25})";
var p = eval(Programmer);
alert(p.name ',' p.age);

We know through the above discussion Understand that all JavaScript objects are a set of dictionaries. There is another important thing in JavaScript - functions.
1: In JavaScript, a function is an object. This is completely different from the method in c#. Let's look at an example below.

Copy code The code is as follows:

function add(point1, point2)
{
var result = {
x : point1.x point2.x,
y : point1.y point2.y
}
return result;
}
var p1 = { x: 1, y: 1 };
var p2 = { x: 2, y: 2 };
var p3 = add (p1, p2);
alert(p3.x "," p3.y);2: Use functions as methods of objects. var Boy=
{
name:"Young",
Love:function(Girl){
return this.name "Fell in love with" Girl.name
}
}
var Girl={
name:"Jing"
}
alert(Boy.Love(Girl));

Now the problem is two similar objects, one There is a love method, and one does not, because we did not define a class similar to C#, but simply created two objects. If you expect to have a love method in both objects, you can define it as follows.

Copy code The code is as follows:

function LoveRelation(person){
alert(this .name "Fell in love with" person.name);
}
var person1={
name:"Young",
Love:LoveRelation
}
var person2={
name:"Jing",
Love:LoveRelation
}
person1.Love(person2);

The above code seems to want to create a person class, and then create There are two instances of the person class so that the two instances have the same characteristics. Obviously the above code is not enough. We can meet this requirement in two ways.
Path 1:

Copy code The code is as follows:

function Person(n)
{
this.name=n;
this.Love=function(person)
{
alert(this.name " fell in love with " person.name);
}
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);

Approach 2: Use the prototype attribute of the JavaScript object.

Copy code The code is as follows:

function Person(n)
{
this.name=n;
}
Person.prototype.Love=function(person)
{
alert(this.name " fell in love with" person.name);
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);
person2.Love(person1);

In the above example, we can regard the Person function as the constructor of the Person object, and all objects constructed through this constructor share a prototype attribute.
In Douglas Crockford's Private Members In JavaScript", the author gives us a detailed demonstration How to create private members of an object will not be explained in detail. Let’s simply rewrite the demo

Copy code The code is as follows :

function Point(x, y)
{
this.get_x = function() { return x; }
this.set_x = function(value) { x = value; }
this.get_y = function() { return y; }
this.set_y = function(value) { y = value; }
}

Point.prototype.print = function()
{
return this.get_x() ',' this.get_y();
}

var p = new Point(2,2);
p.set_x(4);
alert(p.print());

Finally, we explain the namespace of JavaScript objects. Namespace can eliminate some conflicts between types with the same name. Learn Friends who have experienced C# must be very clear about this. We can define the namespace in javascript through the following code var Arcadia = {}

Copy code The code is as follows:

Arcadia.Person=function(n)
{
this.name=n;
}
Arcadia.Person. prototype.Love=function(person)
{
alert(this.name " fell in love with " person.name);
}
var person1=new Arcadia.Person("Young");
var person2=new Arcadia.Person("Jing");
person1.Love(person2);