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代码
Dec 04 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 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简单实现断点续传下载的方法
2015/09/25 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
一个网马的tips实现分析
2010/11/28 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
canvas绘制七巧板
2017/02/03 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python根据文件大小打log日志
2014/10/09 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
五月的鲜花活动方案
2014/08/21 职场文书
对学校的意见和建议
2015/06/04 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技