理解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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
小程序实现留言板
Nov 02 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
配置eslint规范项目代码风格
2019/03/11 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
js实现点赞效果
2020/03/16 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
使用python3构建文件传输的方法
2019/02/13 Python
Python实现把类当做字典来访问
2019/12/16 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
某公司C#程序员面试题笔试题
2014/05/26 面试题
劳资员岗位职责
2013/11/11 职场文书
益达广告词
2014/03/14 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python