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 添加千分位与去掉千分位的示例
Jul 11 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
javascript关于继承解析
May 10 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
JS闭包用法实例分析
Mar 27 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
canvas 中如何实现物体的框选
Aug 05 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强制运行广告的方法
2014/12/01 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Python求解平方根的方法
2015/03/11 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python中的With语句的使用及原理
2020/07/29 Python
Python无损压缩图片的示例代码
2020/08/06 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
小学教师培训方案
2014/06/09 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
会计岗位职责
2015/02/03 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
Python实现天气查询软件
2021/06/07 Python
AngularJS实现多级下拉框
2022/03/25 Javascript