了解JavaScript中的对象

理解JavaScript中的对象

JavaScript有一种object数据类型，但是这种对象不同于c#或vb中的对象，在c#中，我们通过类创建一个对象，一个类相当于创建对象的模板，定义了对象的属性和方法，这些对象和方法将永远固定，我们不能在运行时不能增加对象的属性和方法。
??? 在JavaScript没有类的定义，创建对象时没有固定的模板，可以动态的创建新的属性和方法，在动态创建新属性的时候，我们能做的就是为这个属性创建新的值，下面一个例子就是创建一个对象并增加x,y两个属性。

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

??? JavaScript对象完全不同于c#或vb对象，JavaScript对象可以看成一组健/值对的集合，用对象.属性名来访问一个对象属性。我们可以把JavaScript对象看成.NET framework中Dictionary类，我们可以通过"[]"操作符来创建对象属性。

var?Programmer?=?new?Object();
Programmer["name"]?=?"Young";
Programmer["age"]=?25;
document.getElementById("message").innerHTML=Programmer["name"]?+?"?:?"?+?Programmer["age"];
alert(Programmer.name?+?"?:?"?+?Programmer.age);

???? 通过上面的例子可以发现两种访问对象的方法是一样的。如果一个属性没有创建，将返回"undefined"。
我们同样可以将函数添加为健/值对集合的值，这样就构建为对象的方法，

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

???? 在上面的代码中我们交替使用"."和"[]"来定义可访问属性、方法，者=这两种方法的一样的，有时这些操作符会导致一些概念上的混淆，在为一个已经存在的属性设置新值是表达的不是很清晰，下面我们介绍第三种语法可以更加明确的表达我们的意图。

var?Programmer?=?
{
?????name?:?"Young",
?????age?:?25,
?????speak?:?function(){?alert(this.name?+?"?:?"?+?this.age);?}
}
Programmer.speak();

????上面的代码更加清晰的表达了对象初始化的开始和结束，我们还可以用这种方法在独享中嵌套对象。

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();

???? 这种语法因为其清晰的意图和紧凑的代码格局而非常流行，你可以在各种流行的JavaScript frameworks中看到，包括目前在互联网上流行的JavaScript Object Notation（JSON），JSON是一种轻量级的数据交换格式，同时也易于机器解析和生成，语法也非常严格。JSON允许JavaScript在互联网上交换数据，我们可以用eval将JSON对象转化为本地JavaScript对象。

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

???? 通过上面的讨论我们知道了明白了所有的JavaScript对象都是一组字典。在JavaScript中还有另外一个重要的东西——函数。
1：在JavaScript中，函数都是一个对象。这一点完全不同于c#中的方法。我们看下面一个例子。

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：将函数作为对象的方法。

var?Boy=
{
????name:"Young",
????Love:function(Girl){
????????????return?this.name+"?爱上了?"+Girl.name
?????????}
}
var?Girl={
????name:"Jing"
}
alert(Boy.Love(Girl));

??? 现在问题是两个类似的对象，一个有love方法，一个没有，因为我们并没有定义类似c#的类，而只是简单的创建两个对象，如果你期望在两个对象都有love方法可以象下面那样定义。

function?LoveRelation(person){
????????alert(this.name+"?爱上了?"+person.name);
????}
var?person1={
????name:"Young",
????Love:LoveRelation
}
var?person2={
????name:"Jing",
????Love:LoveRelation
}
person1.Love(person2);

???? 上面的代码看上去想创建一个person类，然后创建person类两个实例，以使这两个实例具有相同的特征，显然上面代码不够。我们可以通过两种途径来满足这种要求。
途径1：

function?Person(n)
{
????this.name=n;
????this.Love=function(person)
????{
????????alert(this.name+"?爱上了?"+person.name);
????}
}
var?person1=new?Person("Young");
var?person2=new?Person("Jing");
person1.Love(person2);

途径2：利用JavaSctipt对象的prototype属性。

function?Person(n)
{
????this.name=n;
}
Person.prototype.Love=function(person)
{
????alert(this.name+"?爱上了?"+person.name);
}
var?person1=new?Person("Young");
var?person2=new?Person("Jing");
person1.Love(person2);
person2.Love(person1);

????? 上面的例子中，我们可以将Person函数看成Person对象的构造器，而所有通过此构造器构造出来的对象共用一个prototype属性。
????? 在Douglas Crockford的<a href="http://www.crockford.com/javascript/private.html">Private Members In JavaScript"</a>中，作者为我们详细的演示了如何创建对象的私有成员，其思想不再详细讲解，我们简单的重写一下那个demo

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());

????? 最后我们讲解一下javascript对象的命名空间，命名空间可以削除一些同名类型间的冲突，学习过c#的朋友对这点一定非常清除了，我们可以在javascript中通过以下代码开定义命名空间。

var?Arcadia?=?{}
Arcadia.Person=function(n)
{
????this.name=n;
}
Arcadia.Person.prototype.Love=function(person)
{
????alert(this.name+"?爱上了?"+person.name);
}
var?person1=new?Arcadia.Person("Young");
var?person2=new?Arcadia.Person("Jing");
person1.Love(person2);