javascript 构造函数强制调用经验总结

2019-12-24,,,

兴致勃勃地定义了下面这么个构造函数
复制代码 代码如下:
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里面的实现拔下写下总结

您可能感兴趣的文章:

  • js动态调用css属性的小规律及实例说明
  • JavaScript 错误处理与调试经验总结
  • js下关于onmouseout、事件冒泡的问题经验小结
  • 写给想学习Javascript的朋友一点学习经验小结
  • javascript 操作select下拉列表框的一点小经验
  • JS前端框架关于重构的失败经验分享
  • JS效率个人经验谈(8-15更新),加入range技巧
  • javascript 框架小结 个人工作经验
  • jquery.validate.js插件使用经验记录
  • Javascript 多浏览器兼容总结(实战经验)
  • 使用node.js半年来总结的 10 条经验
  • 【经验总结】编写JavaScript代码时应遵循的14条规律

《javascript 构造函数强制调用经验总结.doc》

下载本文的Word格式文档,以方便收藏与打印。