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 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
Vue解析剪切板图片并实现发送功能
Feb 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
vue.js中created方法作用
2018/03/30 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
火车票抢票python代码公开揭秘!
2018/03/08 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
国贸专业个人求职信范文
2014/01/08 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
2014年行政部工作总结
2014/11/19 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
nginx部署多前端项目的几种方法
2021/05/25 Servers
Python实现Hash算法
2022/03/18 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫