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语句可以不以;结尾的烦恼
Mar 08 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
vue浏览器返回监听的具体步骤
Feb 03 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版(5)
2006/10/09 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python提取页面内url列表的方法
2015/05/25 Python
Django自定义分页效果
2017/06/27 Python
简单谈谈python基本数据类型
2018/09/26 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
详解Python用户登录接口的方法
2019/04/17 Python
django做form表单的数据验证过程详解
2019/07/26 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
精细化工应届生求职信
2013/11/17 职场文书
环保建议书300字
2014/05/14 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
高中同学会致辞
2015/08/01 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python