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学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
javascript变量声明实例分析
Apr 25 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
jQuery AJAX应用实例总结
May 19 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 cron中的批处理
2008/09/16 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python运用于数据分析的简单教程
2015/03/27 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
银行实习自我鉴定
2013/10/12 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
感谢信怎么写
2015/01/21 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android