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 文件夹选择框的两种解决方案
Jul 01 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
理解JavaScript事件对象
Jan 25 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 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 函数使用方法与函数定义方法
2010/05/09 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
python算法学习之基数排序实例
2013/12/18 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python匿名函数的使用方法解析
2019/10/10 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
前处理班长职位说明书
2014/03/01 职场文书
初三学习计划书范文
2014/04/30 职场文书
政府信息公开实施方案
2014/05/09 职场文书
会计电算化专业求职信
2014/06/10 职场文书
妇女工作先进事迹
2014/08/17 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
交通安全教育心得体会
2016/01/15 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书