慎用 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 相关文章推荐
文本加密解密
Jun 23 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
简单实例处理url特殊符号&处理(2种方法)
Apr 02 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php 中英文语言转换类代码
2011/08/11 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
js调用css属性写法
2013/09/21 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
Vue render深入开发讲解
2018/04/13 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
python中的格式化输出用法总结
2016/07/28 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
python字典的值可以修改吗
2020/06/29 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
小城镇建设汇报材料
2014/08/16 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
关于python中模块和重载的问题
2021/11/02 Python