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 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
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 IE中下载附件问题解决方法
2014/01/07 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
python复制文件的方法实例详解
2015/05/22 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
QQ空间主人寄语大全
2014/04/12 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
工伤事故证明
2014/10/20 职场文书
城南旧事观后感
2015/06/11 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python