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 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
实习自我鉴定范文
2013/10/30 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
社区工作者个人总结
2015/02/28 职场文书
中英文求职信范文
2015/03/19 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
初中军训感想
2015/08/07 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
python 批量压缩图片的脚本
2021/06/02 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技