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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
javascript中万恶的function实例分析
May 25 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
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变量可用字符
2014/05/28 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript一点特殊用法
2008/05/28 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
厂区绿化方案
2014/05/08 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
成事在人观后感
2015/06/16 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Python语言内置数据类型
2022/02/24 Python