javascript 面向对象编程 聊聊对象的事


Posted in Javascript onSeptember 17, 2009

先看一下JSON(javascript object notation)对象,JSON是一种脚本操作时常用的数据交换格式对象,相对于XML来说JSON是一种比较轻量级的格式,在一些intelligence的IDE中还可以方便的通过点操作JSON对象中的成员。

      JSON是一种键/值对方式来描述内部成员的格式,其内部成员可以是几乎任何一种类型的对象,当然也可以是方法、类、数组,也可以是另外一个JSON对象。

var student = {
Name: "张三",
Age: 20,
Hobby: "读书",
Books: [
{
BookName : "C#" ,
Price : 70
},
{
BookName : "Java" ,
Price : 70
},
{
BookName : "Javascript" ,
Price : 80
}
]
};

      上面代码用JSON对象描述了一个学生的信息,他有姓名、年龄、爱好、书集等。在访问该学生对象时,可以通过student变量来操作学生的信息。

var stuInfo = "姓名:" + student.Name +
",年龄:" + student.Age +
",爱好:" + student.Hobby +
",拥有的书:" +
                      student.Books[0].BookName + "、" +
student.Books[1].BookName + "、" +
                      student.Books[2].BookName;
alert(stuInfo);

      这样的操作方式风格和C#也非常相像。以上的代码是静态的构造出了学生对象,学生对象的结构就确定了。在其它的编程语言中一般对象结构一旦确定就不能很方便的进行修改,但是在javascript中的对象结构也可以方便的进行改动。下面为student对象添加一个Introduce方法来做自我介绍。

student.Introduce = function() {
var stuInfo = "姓名:" + this.Name +
",年龄:" + this.Age +
",爱好:" + this.Hobby +
",拥有的书:" +
this.Books[0].BookName + "、" +
this.Books[1].BookName + "、" +
this.Books[2].BookName;
alert(stuInfo)
};
student.Introduce();

      student对象原来并没有Introduce方法,第一次为student.Introduce赋值会在student对象中创建一个新的成员,后面如果再为student.Introduce赋值则会覆盖上一次所赋的值。当然我们这的值是一个function。也可以用类似索引的方式来添加成员。

student["Introduce"] = function() {
……
};
 
student.Introduce();

当然添加的成员也可以删除掉。删除掉之后则成为undefined,再访问该成员时则不支持。

delete student.Introduce;
student.Introduce();
 

        javascript 面向对象编程 聊聊对象的事

        javascript是弱类型的语言,有的时候即使有IDE的辅助也不能很清楚知道当前所操作对象的成员,可能会需要对当前对象的属性进行查询,这时候我们可以使用for循环来完成。

for (var key in student) {
document.write(key + " : " + student[key] + "<br />");
};

        javascript 面向对象编程 聊聊对象的事

      对student对象进行遍历时,是对student的成员进行遍历,这里的key则对应student对象中的每一个成员属性名称。student[key]则是对student某个成员进行访问。如果想调用student的Introduce方法也可以用索引的方式,student[“Introduce”]()。

      上面简单的聊了聊JSON对象,总的来说JSON是很方便的数据打包方式。javascript中的其它的对象,不论是浏览器对象,还是自定义类型所创建的对象或者是数组等等,它们也都具有JSON对象类似的操作方式。我们可以直接用索引的方式为window添加成员,我们也可以为数组添加字符串形式的下标把它当成Hashtable来操作。

window["Hi"] = function() {
alert("helloworld!");
};
window["Hi"]();
 
var array = [];
array["一"] = "A";
array["二"] = "B";
array["三"] = "C";
array["四"] = "D";
alert(array["一"] + array["二"] + array["三"] + array["四"]);

      把数组当成Hashtable来操作时,要注意,并非是为数组添加数组元素,而是在数组对象中添加新的属性成员。而且如果for(var key in array)循环遍历数组对象的话,key得到的却不是array对象的属性名称,而是数组元素的索引号。

下一次聊聊function。

Javascript 相关文章推荐
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 #Javascript
javascript 面向对象编程 function也是类
Sep 17 #Javascript
类似CSDN图片切换效果脚本
Sep 17 #Javascript
var与Javascript变量隐式声明
Sep 17 #Javascript
html数组字符串拼接的最快方法
Sep 16 #Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 #Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 #Javascript
You might like
使用PHP维护文件系统
2006/10/09 PHP
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
js function使用心得
2010/05/10 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
父母寄语大全
2014/04/12 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
校长新学期寄语2016
2015/12/04 职场文书
导游词之河北邯郸
2019/09/12 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
一文搞懂Redis中String数据类型
2022/04/03 Redis