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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
详解Vue This$Store总结
Dec 17 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
pageGroup.js实现分页功能
Jul 27 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+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python  连接字符串(join %)
2008/09/06 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python简单日志处理类分享
2015/02/14 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
五年级英语教学反思
2014/01/31 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
家长对孩子的寄语
2015/02/26 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript