脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 对象

理解JavaScript中的对象 推荐

 更新时间：2011年01月09日 18:26:01   作者：  
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);

相关文章

  • JavaScript 总结几个提高性能知识点(推荐)

    JavaScript 总结几个提高性能知识点(推荐)

    下面小编就为大家带来一篇JavaScript 总结几个提高性能知识点(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 微信小程序日期时分组件(年月日时分)

    微信小程序日期时分组件(年月日时分)

    这篇文章主要为大家详细介绍了微信小程序日期时分组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 前端判断节假日的详细代码举例

    前端判断节假日的详细代码举例

    因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢?这篇文章主要给大家介绍了关于前端判断节假日的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • 深入理解javascript中concat方法

    深入理解javascript中concat方法

    本文主要介绍了javascript中concat方法，主要分为2小节内容：1.concat方法的基础介绍；2.从实例中感受concat方法。需要的朋友一起来看下吧
    2016-12-12
  • JavaScript实现在数组中查找不同顺序排列的字符串

    JavaScript实现在数组中查找不同顺序排列的字符串

    这篇文章主要介绍了JavaScript实现在数组中查找不同顺序排列的字符串,本文用两个方法解决了这道算法题,需要的朋友可以参考下
    2014-09-09
  • javascript避免数字计算精度误差的方法详解

    javascript避免数字计算精度误差的方法详解

    本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • JS document内容及样式操作完整示例

    JS document内容及样式操作完整示例

    这篇文章主要介绍了JS document内容及样式操作,结合完整实例形式分析了JavaScript document内容及样式的获取、修改、添加等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • js实现上传图片并显示图片名称

    js实现上传图片并显示图片名称

    这篇文章主要为大家详细介绍了js实现上传图片并显示图片名称，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JavaScript网页定位详解

    JavaScript网页定位详解

    本篇文章主要是对JavaScript网页定位进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • javascript 中关于array的常用方法详解

    javascript 中关于array的常用方法详解

    这篇文章主要介绍了javascript 中关于array的常用方法的相关资料,需要的朋友可以参考下
    2017-05-05

最新评论