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 相关文章推荐
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
php实例化一个类的具体方法
2019/09/19 PHP
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python计算最大优先级队列实例
2013/12/18 Python
python简单判断序列是否为空的方法
2015/06/30 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
测试工程师程序员求职信范文
2014/02/20 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
预备党员入党感想
2015/08/10 职场文书
python单元测试之pytest的使用
2021/06/07 Python