慎用 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 的 prototype问题。
Jan 03 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
javascript 三种编解码方式
Feb 01 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 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 _autoload自动加载类与机制分析
2012/02/10 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
python求众数问题实例
2014/09/26 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python实现宿舍管理系统
2019/11/22 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
python高级特性简介
2020/08/13 Python
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
会计工作心得体会
2014/01/13 职场文书
读书活动总结范文
2014/04/26 职场文书
小浪底导游词
2015/02/12 职场文书
财务工作个人总结
2015/02/27 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
推广普通话的宣传语
2015/07/13 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python