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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
js 上传图片预览问题
Dec 06 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
vue项目中添加单元测试的方法
Jul 21 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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部分常见问题总结
2008/03/27 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP xpath()函数讲解
2019/02/11 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现从订阅源下载图片的方法
2015/03/11 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python for循环中的陷阱详解
2018/07/13 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
教师通用专业自荐书范文
2014/02/11 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
化学专业自荐信
2014/05/28 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
Vue全局事件总线你了解吗
2022/02/24 Vue.js
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技