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基础整理1
Dec 06 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
vue实现记事本功能
Jun 26 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
解决await在forEach中不起作用的问题
Feb 25 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
ZendFramework2连接数据库操作实例
2017/04/18 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
java必学必会之static关键字
2015/12/03 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
js实现放大镜特效
2017/05/18 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
学校后勤岗位职责
2014/02/19 职场文书
室内设计专业自荐信
2014/05/31 职场文书
班主任工作实习计划
2015/01/16 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
采购员岗位职责范本
2015/04/07 职场文书
消防宣传标语大全
2015/08/03 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript