慎用 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是如何实现继承的
Dec 12 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
js调用网络摄像头的方法
Dec 05 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实现微信退款功能
2018/10/02 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
详解Python编程中包的概念与管理
2015/10/16 Python
python字符类型的一些方法小结
2016/05/16 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Django实现分页功能
2018/07/02 Python
python修改FTP服务器上的文件名
2019/09/11 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
提拔干部考察材料
2014/05/26 职场文书
简历自我评价优缺点
2015/03/11 职场文书