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实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php 执行系统命令的方法
2009/07/07 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
儿童编程python入门
2018/05/08 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python的setattr函数实例用法
2020/12/16 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
年终晚会主持词
2014/03/25 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
在js中修改html body的样式
2021/11/11 Javascript