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 select操作的日期联动实现代码
Dec 06 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
原生js二级联动效果
Jun 20 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
react中hook介绍以及使用教程
Dec 11 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面向对象分析设计的经验原则
2008/09/20 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
使用Python生成XML的方法实例
2017/03/21 Python
手把手教你python实现SVM算法
2017/12/27 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
市场部经理岗位职责
2014/04/10 职场文书
婚庆公司计划书
2014/09/15 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
法人身份证明书
2014/10/08 职场文书
债务追讨律师函
2015/06/24 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL