慎用 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新手语法小结
Jun 15 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
实例讲解JS中pop使用方法
Jan 27 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
js格式化时间小结
2014/11/03 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Python实现身份证号码解析
2015/09/01 Python
numpy中索引和切片详解
2017/12/15 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
如何用python免费看美剧
2020/08/11 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
俄语专业职业生涯规划
2014/02/26 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
校园安全广播稿范文
2014/09/25 职场文书
幼儿园开学通知
2015/04/24 职场文书
感恩教育主题班会
2015/08/12 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
各种货币符号快捷输入
2022/02/17 杂记