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 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
vue实现打地鼠小游戏
Aug 21 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
自动跳转中英文页面
2006/10/09 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
ES5新增数组的实现方法
2020/05/12 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python 获取主机ip与hostname的方法
2018/12/17 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python两个list[]相加的实现方法
2020/09/23 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
2014年安全生产目标责任书
2014/07/23 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
离婚协议书标准格式
2014/10/04 职场文书
公务员政审个人总结
2015/02/12 职场文书
承诺书模板大全
2015/05/04 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js