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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
jQuery实现大图轮播
Feb 13 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
二维码条形码生成的JavaScript脚本库
Jul 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
php实现简单四则运算器
2020/11/29 PHP
javascript 继承实现方法
2009/08/26 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
python PIL模块的基本使用
2020/09/29 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
外包公司软件测试工程师
2014/11/01 面试题
优秀团干部个人事迹
2014/05/29 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
关于nginx 实现jira反向代理的问题
2021/09/25 Servers