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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Javascript使用integrity属性进行安全验证
Nov 07 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会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python入门之三角函数全解【收藏】
2017/11/08 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
工程招投标邀请书
2014/01/26 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
学习十八大宣传标语
2014/10/09 职场文书
电力安全学习心得体会
2016/01/18 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏