慎用 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 强制类型转换函数
May 17 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
js获取form的方法
May 06 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
JS轮播图的实现方法2
Aug 25 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 unset全局变量运用问题的深入解析
2013/06/17 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
python单链表实现代码实例
2013/11/21 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python 反向输出字符串的方法
2018/07/16 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python eval函数介绍及用法
2020/11/09 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
自荐信格式的六要素
2013/09/21 职场文书
团日活动总结书
2014/05/08 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server