理解JavaScript中的对象 推荐


Posted in Javascript onJanuary 09, 2011

在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词法作用域与调用对象深入理解
Nov 29 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
最佳JS代码编写的14条技巧
Jan 09 #Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 #Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 #Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 #Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 #Javascript
Jquery Ajax请求代码(2)
Jan 07 #Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php去除HTML标签实例
2013/11/06 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
CSS常用网站布局实例
2008/04/03 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
python实现感知器
2017/12/19 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
使用python实现画AR模型时序图
2019/11/20 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书