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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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自定义函数格式化json数据示例
2016/09/14 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
js数组的操作详解
2013/03/27 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
jQuery功能函数详解
2015/02/01 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
python万年历实现代码 含运行结果
2017/05/20 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python语音识别实践之百度语音API
2018/08/30 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
个人自我鉴定范文
2013/10/04 职场文书
回门宴答谢词
2014/01/13 职场文书
高中生操行评语大全
2014/04/25 职场文书
公司领导班子对照材料
2014/08/18 职场文书
销售辞职信范文
2015/03/02 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
一条 SQL 语句执行过程
2022/03/17 MySQL