javascript 构造函数强制调用经验总结


Posted in Javascript onDecember 02, 2012

兴致勃勃地定义了下面这么个构造函数:

var Coder = function( nick ){ 
this.nick = nick; 
};

定义构造函数结束后呢?没错,赶紧实例化:
var coder = Coder( 'casper' );
这个coder兄弟叫什么名字?赶紧打印下:
console.log( coder.nick ); //undefined 
= =b 竟然是undefined!!再回过头看看实例化的那个语句,不难发现问题出在哪里:少了个new 
var coder = Coder( 'casper' ); //当作普通的函数来调用,故内部的this指针其实指向window对象 
console.log( window.nick); //输出:casper 
var coder = new Coder( 'casper' ); //加上new,一切皆不同,this正确地指向了当前创建的实例 
console.log( coder.nick ); //输出:casper

关于this指针的指向问题不是本文讨论的内容,可以参考下犀牛书相关章节
这样的错误貌似挺低级的,但出现的概率挺高的,肿么去避免或减少这种情况的发生呢?
可以在内部实现里面动下手脚:
var Coder = function( nick ){ 
if( !(this instanceof Coder) ){ 
return new Coder( nick ); 
} 
this.nick = nick; 
};

其实很简单,实例化的时候,内部判断下,当前this指向的对象的类型即可,如果非当前构造函数的类型,强制重新调用一遍构造函数。
突然觉得Coder这名字不够洋气?想用Hacker,好吧,我改。。。数了下,一共有三处要改,这不科学,有没有办法只把构造函数的名字改了就行?
当然有:
var Coder = function( nick ){ 
if( !(this instanceof arguments.callee) ){ 
return new arguments.callee( nick ); 
} 
this.nick = nick; 
};
 
tips:据说在ES 5的严格模式下面arguments.callee会被禁用,不过仅当ES 5普及同时你指定了要使用严格模式,否则还是可以用的发散下思维:在JQ里面包打天下所向披靡的$,大家都知道它会返回一个jquery对象,如下:
var jObject = $('#node_id');
有没有发现,这里同样没有new!应该猜到怎么回事了吧。原理是差不多的,不过里面的实现要复杂得多,有空再把JQ里面的实现拔下写下总结
Javascript 相关文章推荐
日期 时间js控件
May 07 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
js精度溢出解决方案
Dec 02 #Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 #Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 #Javascript
javascript控制swfObject应用介绍
Nov 29 #Javascript
javascript 保存文件到本地实现方法
Nov 29 #Javascript
jquery连缀语法如何实现
Nov 29 #Javascript
javascript 使td内容不换行不撑开
Nov 29 #Javascript
You might like
社区(php&&mysql)二
2006/10/09 PHP
PHP一些有意思的小区别
2006/12/06 PHP
php学习之变量的使用
2011/05/29 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
laravel安装和配置教程
2014/10/29 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
js 编写规范
2010/03/03 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
个人简历中的自我评价怎么写
2014/01/26 职场文书
化妆品促销方案
2014/02/24 职场文书
宿舍标语大全
2014/06/19 职场文书
单位同意报考证明
2015/06/17 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang