慎用 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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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中的字符串函数
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
网络管理专业求职信
2014/03/15 职场文书
后进生评语大全
2015/01/04 职场文书
泰山导游词
2015/02/02 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
师范生见习总结范文
2015/06/23 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python