慎用 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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
js中this用法实例详解
May 05 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
Echarts如何重新渲染实例详解
May 30 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分页集合包括使用方法
2013/10/21 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP内置加密函数详解
2016/11/20 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
js图片处理示例代码
2014/05/12 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
从零学Python之hello world
2014/05/21 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
python根据日期返回星期几的方法
2015/07/06 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
基于opencv实现简单画板功能
2020/08/02 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
园林系毕业生求职信
2014/06/23 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
学习退步检讨书
2014/09/28 职场文书
安全承诺书
2015/01/19 职场文书
回复函格式及范文
2015/07/14 职场文书