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 内存回收机制理解
Jan 17 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
js取模(求余数)隔行变色
May 15 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
浅析JS异步加载进度条
May 05 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
在Python的web框架中配置app的教程
2015/04/30 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
本科生的职业生涯规划范文
2014/01/09 职场文书
环境卫生标语
2014/06/09 职场文书
房产授权委托书范本
2014/09/22 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
图书借阅制度范本
2015/08/06 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
详解Java实践之抽象工厂模式
2021/06/18 Java/Android