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调用XML制作连动下拉列表框
Jun 25 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
js实现车辆管理系统
Aug 26 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
Laravel下生成验证码的类
2017/11/15 PHP
实例讲解PHP表单处理
2019/02/15 PHP
php精度计算的问题解析
2019/06/21 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
JavaScript触发器详解
2007/03/10 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
单位未婚证明范本
2014/11/25 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
亮剑观后感500字
2015/06/05 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2015年暑假生活总结
2015/07/13 职场文书
人民币使用说明书
2019/04/17 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技