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 相关文章推荐
JQuery小知识
Oct 15 Javascript
jquery操作select方法汇总
Feb 05 Javascript
js中this用法实例详解
May 05 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
四十九个javascript小知识实用技巧
Nov 20 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 APC的安装与使用详解
2013/06/13 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
Dojo 学习要点
2010/09/03 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
Python入门篇之文件
2014/10/20 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
python 对xml解析的示例
2021/02/27 Python
linux面试相关问题
2013/04/28 面试题
土木工程专业个人求职信
2013/12/05 职场文书
关于运动会的稿件
2014/02/02 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
中学教师个人总结
2015/02/10 职场文书
永远是春天观后感
2015/06/12 职场文书