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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
angularJS开发注意事项
May 26 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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/07/10 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python-接口开发入门解析
2019/08/01 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
求职简历自荐信范文
2013/10/21 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
社区矫正工作方案
2014/06/04 职场文书
工程项目经理任命书
2014/06/05 职场文书
大学生实训报告总结
2014/11/05 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
技术转让协议书
2016/03/19 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers