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实现的网页颜色代码表全集
Jul 17 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
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/21 PHP
php存储过程调用实例代码
2013/02/03 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python环境下安装opencv库的方法
2020/03/05 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
单位领导证婚词
2014/01/14 职场文书
高中军训感想800字
2014/02/23 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电