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 解决“options为空或不是对象”
Dec 22 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
js实现select下拉框菜单
Dec 08 Javascript
JavaScript设计模式初探
Jan 07 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
微信小程序实现搜索历史功能
Mar 26 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 fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python写入CSV文件的方法
2015/07/08 Python
使用Python读取大文件的方法
2018/02/11 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python编写微信公众号首图思路详解
2019/12/13 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
使用python求解二次规划的问题
2020/02/29 Python
python中JWT用户认证的实现
2020/05/18 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
说明书怎么写
2014/05/06 职场文书
篮球比赛口号
2014/06/10 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技