Javascript学习笔记5 类和对象


Posted in Javascript onJanuary 11, 2010

面向对象语言三大特点:继承,多态,封装,这三点虽然Javascript没有提供天然的语法实现,但是我们都可以通过prototype等技巧来实现,因此这种说法似乎不过分。
在Javascript中,构造对象有三种方式:
1. 首先,我们要明确一个概念,Javascript是一种弱类型的语言,一方面体现在Javascript的变量,返回类型都是没有强类型约束的,另一方面,Javascript可以为对象任意添加属性和方法。根据这个,我们可以写出这样的代码:

<script type="text/javascript"> 
var person = {}; 
person.name = "飞林沙"; 
person.age = 21; 
person.Introduce = function () { 
alert("My name is " + this.name + ".I'm " + this.age); 
}; 
person.Introduce(); 
</script>

这里的person就是我们构造出的一个对象。
2. 我们也可以利用JSON的形式来构造一个对象。
<script type="text/javascript"> 
var person = { 
name: "飞林沙", 
age: 21, 
Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); } 
}; 
person.Introduce(); 
</script>

这个是不是很像我们在C#3.0里提出的匿名对象呢?
protected void Page_Load(object sender, EventArgs e) 
{ 
var person = new 
{ 
name = "飞林沙", 
age = 21 
}; 
Response.Write("My name is " + person.name + ".I'm " + person.age); 
}

不同的是在Javascript中,函数是一种类型,所以可以赋给某个变量,但是C#不可以。
但是上面两种方法我们看到,我们都是单独定义了一个对象。接下来让我们把他们抽象出来成为一个类。
<script type="text/javascript"> 
var Person = function () { 
this.name = "飞林沙"; 
this.age = 21; 
this.Introduce = function () { 
alert("My name is " + this.name + ".I'm " + this.age); 
}; 
}; 
var person = new Person(); 
person.Introduce(); 
</script>

可是在这里,我们看到,属性都已经被写死了,我们根本没办法为每个对象单独订制,解决办法很简单:
<script type="text/javascript"> 
var Person = function (name, age) { 
this.name = name; 
this.age = age; 
this.Introduce = function () { 
alert("My name is " + this.name + ".I'm " + this.age); 
}; 
}; 
var person = new Person("飞林沙", 21); 
person.Introduce(); 
</script>

好,我们来对比一下第二种和第三种写法,两者是等效的。在第二种写法中,实际上是构建了一个JSON对象,而我们又知道JSON本质上其实就是一个键值对,那么我们是否也可以用同样的方式来理解一个对象呢?
我们来写出这样的测试代码试试:
<script type="text/javascript"> 
var Person = function (name, age) { 
this.name = name; 
this.age = age; 
this.Introduce = function () { 
alert("My name is " + name + ".I'm " + age); 
}; 
}; 
var person = new Person("飞林沙", 21); 
for (var p in person) { 
alert(p); 
} 
alert(person["name"]); 
</script>

这样的代码没偶任何问题,首先用遍历的方式来找到person所有的key(属性和方法名)。然后我们用索引的方式来访问person对象的name属性。
这些都没有问题,可是我们是不是看到了一个引申的问题,从传统面向对象的语言来看,name和age应该属于私有变量,那么这样用person简简单单的访问,是不是破坏了封装性呢?
还记得我们在前文中说过的么?var的叫变量,没有var的叫属性。那么我们如果讲代码改成这个样子。
<script type="text/javascript"> 
var Person = function (name, age) { 
var name = name; 
var age = age; 
this.GetName = function () { 
return name; 
} 
this.GetAge = function () { 
return age; 
} 
this.Introduce = function () { 
alert("My name is " + name + ".I'm " + age); 
}; 
}; 
var person = new Person("飞é林?沙3", 21); 
alert(person["name"]); 
alert(person.GetName()); 
</script>

这样就可以封装得很好了,这也是在Javascript中的封装方式。
好,关于Javascript的类和对象就说到这,但是这里面仍然有一些问题。我们会在下文中提及。
Javascript 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
js实现简单的秒表
Jan 16 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
Javascript学习笔记4 Eval函数
Jan 11 #Javascript
Javascript学习笔记2 函数
Jan 11 #Javascript
Javascript学习笔记1 数据类型
Jan 11 #Javascript
IE bug table元素的innerHTML
Jan 11 #Javascript
javascript instanceof 与typeof使用说明
Jan 11 #Javascript
javascript call方法使用说明
Jan 11 #Javascript
jQuery UI-Draggable 参数集合
Jan 10 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
Python模拟登陆实现代码
2017/06/14 Python
python生成excel的实例代码
2017/11/08 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
测量实习生自我鉴定
2013/09/19 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
企业厂长岗位职责
2013/12/17 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
九年级历史教学反思
2014/01/27 职场文书
竞选村长演讲稿
2014/04/28 职场文书
先进员工事迹材料
2014/12/20 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
甲午风云观后感
2015/06/02 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL