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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
javascript读写json示例
Apr 11 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
JS清除选择内容的方法
Jan 29 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
JS快速实现简单计算器
Apr 08 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
初品cakephp 入门基础
2012/02/16 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
脚本收藏iframe
2006/07/21 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
js实现转动骰子模型
2019/10/24 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python socket编程实例详解
2015/05/27 Python
Python  Django 母版和继承解析
2019/08/09 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
三维科技面试题
2013/07/27 面试题
小学开学寄语
2014/01/19 职场文书
活动策划求职信模板
2014/04/21 职场文书
工程造价专业求职信
2014/07/17 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
入党积极分子个人总结
2015/03/02 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
详解Laravel制作API接口
2021/05/31 PHP
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server