慎用 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 相关文章推荐
js 操作select和option常用代码整理
Dec 13 Javascript
javascript打印输出json实例
Nov 11 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
新手简单了解vue
May 29 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/11/26 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Flask之flask-session的具体使用
2018/07/26 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
会计专业应届生求职信
2013/11/24 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
李开复演讲稿
2014/05/24 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python