慎用 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去空格处理方法
Nov 18 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
js正则相关知识点专题
May 10 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
vue实现的下拉框功能示例
Jan 29 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
详解TypeScript中的类型保护
Apr 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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
php读取excel文件的简单实例
2013/08/26 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
jquery提示 "object expected"的解决方法
2009/12/13 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python处理xml文件的方法小结
2017/05/02 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Python3 元组tuple入门基础
2020/02/09 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
平安建设实施方案
2014/03/19 职场文书
汽车维修求职信
2014/06/15 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
护士2015年终工作总结
2015/04/29 职场文书
2015年路政工作总结
2015/05/22 职场文书
换届选举主持词
2015/07/03 职场文书
导游词之无锡唐城
2019/12/12 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS