慎用 somefunction.prototype 分析


Posted in Javascript onJune 02, 2009
// code from 3water.com 
function Person(name) { 
this.Name = name; 
} 
Person.prototype.SayHello = function() { 
alert('Hello, ' + this.Name); 
} 
Person.prototype.SayBye = function() { 
alert('Goodbye, ' + this.Name); 
}

不过,有的时候,为了书写以及维护的方便,我们会把公有方法的声明写到一个对象里,然后赋值给 Person.prototype,例如:
// code from 3water.com 
function Person(name) { 
this.Name = name; 
} 
Person.prototype = { 
SayHello: function() { 
alert('Hello, ' + this.Name); 
}, 
SayBye: function() { 
alert('Goodbye, ' + this.Name); 
} 
}

使用这种方式,在这个类具有大量公有方法的时候,就不需要维护许多的 Person 标识符,如果某一天这个类的名字需要改变,那么要改的地方只有两个,一个是 function 的声明,一个是 prototype 前面的标识符,如果是使用前一种方式的话,那么有多少个公有方法,就需要维护 N+1 个标识符了,虽然可以使用查找替换,但是从稳定上来说,查找替换可能会引起一些错误,这增加了维护的成本。

这种方式虽然给我们的维护增加了便利,但也引发了另外一个隐藏的问题,就是类的 constructor 属性丢失的问题。

// code from 3water.com 
function Person1(name) { 
this.Name = name; 
} 
Person1.prototype.SayHello = function() { 
alert('Hello, ' + this.Name); 
} 
Person1.prototype.SayBye = function() { 
alert('Goodbye, ' + this.Name); 
} 
// code from 3water.com 
function Person2(name) { 
this.Name = name; 
} 
Person2.prototype = { 
SayHello: function() { 
alert('Hello, ' + this.Name); 
}, 
SayBye: function() { 
alert('Goodbye, ' + this.Name); 
} 
} 
alert(new Person1('Bill').constructor); 
alert(new Person2('Steve').constructor);

运行上面的测试代码我们可以发现,Person1 的 constructor 属性为 Person1 类的构造函数,但是 Person2 的 constructor 属性却是 Object,那么在需要使用 constructor 属性来判断对象类型的时候,就会出现问题。
因此,在写 JavaScript 类的时候,如果不需要使用 constructor 属性来获取对象的类型,那么个人比较倾向于使用第二种写法,但是如果需要使用 constructor 属性以实现自己的反射机制或 GetType 函数等等,那么就要使用第一种写法。
当然,如果在实现自己反射机制或 GetType 函数时并不依赖 constructor 属性,那么两种写法都是可以的了,例如额外维护一个成员变量,用于标识自身的类型等。也可以使用一些现成的JS框架,有一些框架已经实现了JS中类的实现等,例如 js.class,这就看个人需要进行取舍了。
Javascript 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
分享Javascript实用方法二
Dec 13 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 #Javascript
javascript 图片上传预览-兼容标准
Jun 01 #Javascript
javascript 关闭IE6、IE7
Jun 01 #Javascript
帮助避免错误的Javascript陷阱清单
May 31 #Javascript
JS 文字符串转换unicode编码函数
May 30 #Javascript
Javascript 日期对象Date扩展方法
May 30 #Javascript
Jquery 基础学习笔记之文档处理
May 29 #Javascript
You might like
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
python Flask实现restful api service
2017/12/04 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
银行职员个人的工作自我评价
2014/02/15 职场文书
活动策划求职信模板
2014/04/21 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
任命通知范文
2015/04/21 职场文书
航班延误投诉信
2015/07/02 职场文书
反邪教教育心得体会
2016/01/15 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers