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 相关文章推荐
用于table内容排序
Jul 21 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP基础学习小结
2011/04/17 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
微信小程序自定义导航栏
2018/12/31 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
几种实用的pythonic语法实例代码
2018/02/24 Python
Python爬取某平台短视频的方法
2021/02/08 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
医务人员自我评价
2014/01/26 职场文书
公司中秋节活动方案
2014/02/12 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
退税申请报告怎么写
2015/05/18 职场文书