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 相关文章推荐
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
js逆向解密之网络爬虫
May 30 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
Vuex的API文档说明详解
Feb 05 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中error_reporting()用法详解
2015/08/31 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
详解php中 === 的使用
2016/10/24 PHP
javascript实现日期格式转换
2014/12/16 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python实现神经网络感知器算法
2017/12/20 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
详解Python打包分发工具setuptools
2019/08/05 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
学校运动会广播稿范文
2014/10/02 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
公司股份合作协议书
2014/12/07 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
详解jQuery的核心函数和事件处理
2022/02/18 jQuery