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 API学Jquery之一 选择器
Apr 07 Javascript
JavaScript 事件系统
Jul 22 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
JavaScript多线程详解
Aug 12 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
js+css实现select的美化效果
Mar 24 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP 8新特性简介
2020/08/18 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
vue filters的使用详解
2018/06/11 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
python opencv进行图像拼接
2020/03/27 Python
python 如何将office文件转换为PDF
2020/09/22 Python
公司业务主管岗位职责
2013/12/07 职场文书
活动策划求职信模板
2014/04/21 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
故意伤害辩护词
2015/05/21 职场文书
学校隐患排查制度
2015/08/05 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers