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 入门级学习笔记及源码
Jan 22 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
Python性能优化技巧
2015/03/09 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python实现句子翻译功能
2017/11/14 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
国际会计专业求职信
2014/08/04 职场文书
教师教育教学随笔
2015/08/15 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Go语言基础知识点介绍
2021/07/04 Golang
理解python中装饰器的作用
2021/07/21 Python
Python List remove()实例用法详解
2021/08/02 Python