慎用 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实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
JS原型对象操作实例分析
Jun 06 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
如何开始收听短波广播
2021/03/01 无线电
乐信RP2100的电路分析和打磨
2021/03/02 无线电
PHP实现Socket服务器的代码
2008/04/03 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python实现八大排序算法(1)
2017/09/14 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
函授本科自我鉴定
2013/11/03 职场文书
项目经理的岗位职责
2013/11/23 职场文书
运动会表扬稿大全
2014/01/16 职场文书
期末自我鉴定
2014/02/02 职场文书
中考冲刺决心书
2014/03/11 职场文书
高中教师考核方案
2014/05/18 职场文书
计算机求职信
2014/07/02 职场文书
优秀党员事迹材料
2014/12/18 职场文书
小学德育工作总结2015
2015/05/12 职场文书
高中历史教学反思
2016/02/19 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫