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 相关文章推荐
模拟select的代码
Oct 19 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Python对数据库操作
2016/03/28 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python文件选择对话框的操作方法
2019/06/27 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
酒店总经理岗位职责
2014/03/17 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
停电放假通知
2015/04/14 职场文书
红色故事汇观后感
2015/06/18 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers