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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
js+css3实现炫酷时钟
Aug 18 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中namespace use用法实例分析
2016/01/22 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
php接口隔离原则实例分析
2019/11/11 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
利用python实现逐步回归
2020/02/24 Python
Python colormap库的安装和使用详情
2020/10/06 Python
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
Python是如何进行类型转换的
2013/06/09 面试题
《音乐之都维也纳》教学反思
2014/04/16 职场文书
五四青年节演讲稿
2014/05/26 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
单位证明范文
2015/06/18 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
浅谈MySQL中的六种日志
2022/03/23 MySQL
nginx七层负载均衡配置详解
2022/07/15 Servers