慎用 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 相关文章推荐
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
javascript生成随机数的方法
May 16 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
通过实例解析js简易模块加载器
Jun 17 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python字符串,数值计算
2016/10/05 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
进步之星获奖感言
2014/02/22 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
重阳节主题班会
2015/08/17 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
导游词之无锡梅园
2019/11/28 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript