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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
javascript版2048小游戏
Mar 18 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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原理之异常机制深入分析
2010/08/08 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python中pygame安装方法图文详解
2015/11/11 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
python在不同条件下的输入与输出
2020/02/13 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
C#的几个面试问题
2016/05/22 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
联欢晚会主持词
2014/03/25 职场文书
葬礼司仪主持词
2014/03/31 职场文书
网络技术专业求职信
2014/05/02 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
个人租房协议书样本
2014/10/01 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
关于童年的读书笔记
2015/06/26 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
SQL注入详解及防范方法
2021/12/06 MySQL