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 相关文章推荐
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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
如何选购合适的收音机
2021/03/01 无线电
我的论坛源代码(三)
2006/10/09 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
php和nginx交互实例讲解
2019/09/24 PHP
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
快速入门Vue
2016/12/19 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
深入了解js原型模式
2019/05/30 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
python实现感知器
2017/12/19 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python 实现多维数组转向量
2019/11/30 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
行政助理岗位职责
2013/11/10 职场文书
人力资源经理自我评价
2014/01/04 职场文书
满月酒主持词
2014/03/27 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
运动会广播稿100字
2014/09/14 职场文书
教师节横幅标语
2014/10/08 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
js判断两个数组相等的5种方法
2022/05/06 Javascript