慎用 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 getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
网页和浏览器兼容性问题汇总(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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
header跳转和include包含问题详解
2012/09/08 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JS获取父节点方法
2009/08/20 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
《她是我的朋友》教学反思
2014/04/26 职场文书
村班子对照检查材料
2014/08/18 职场文书
服务行业演讲稿
2014/09/02 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
打架检讨书范文
2015/01/27 职场文书
士兵突击观后感
2015/06/16 职场文书