js当一个变量为函数时 应该注意的一点细节小结


Posted in Javascript onDecember 29, 2011

先看一段简单的代码:

var testFun=function (name,age){ 
var job='Flash Develop'; 
return new testFun.init(name,age,job); 
} 
testFun.init=function(name,age,job){ 
return 'name:'+name+',age:'+age+',job:'+job+''; 
} 
alert(testFun('vincent',30)); //[object Object]

代码很简单,变量testFun为一个匿名函数,匿名函数返回的一个testFun.init对象(也是一个匿名函数)。但对于一些新手有时会误解为:testFun是返回的一个testFun.init对象。他可能会这样想,在匿名函数function(name,age)构建过程中,又用到了testFun. 此时testFun还在构建中,应该还没有存在,testFun.init更没有存在,怎么就可以用testFun.init呢?

其实这样想是存在了一个误区:把testFun与testFun()等同起来了,如果testFun是返回的一个testFun.init对象,代码应该是testFun=function(name,age){… …}()。正确的理解应该是这样的,testFun只是一个函数,当你把一个函数赋于它时,它就已经存在了,哪怕函数返回的是undefined或null,它本身仍然是Function,只有testFun()执行后返回值才是undefined或null。返回值是testFun()执行的结果,结果返回后,就不再与testFun有任何关系。如:

var testFun=function(){ 
return undefined; 
} 
var result=testFun(); 
alert(testFun); // function () {return undefined;} 
alert(result); // undefined result与testFun不再有任何关系

所以,当赋于testFun一个匿名函数后,它就一直存在着,直到赋于它另外一个值。对于testFun.init你可以这样简单的去理解:
testFun.init=function(name,age){}.init=function(name,age.job){… …}
综上所述,回头再看testFun是一个函数,而testFun()则是(function(name,age,job){return 'name:'+name+',age:'+age+',job:'+job+''; })()
为了便于理解,可以把代码精简为:
var testFun=function(){} 
testFun.init=function(){}

只是testFun()没有返回一个testFun.init对象罢了。
Javascript 相关文章推荐
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
js变换显示图片的实例
Apr 16 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
express express-session的使用小结
Dec 12 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 #Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 #Javascript
Jquery中删除元素的实现代码
Dec 29 #Javascript
js的表单操作 简单计算器
Dec 29 #Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 #Javascript
JavaScript中两个感叹号的作用说明
Dec 28 #Javascript
javascript (用setTimeout而非setInterval)
Dec 28 #Javascript
You might like
mysql 搜索之简单应用
2007/04/27 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
xml转json的js代码
2012/08/28 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中List.count()方法的使用教程
2015/05/20 Python
python简单操作excle的方法
2018/09/12 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python读取xml文件方法解析
2020/08/04 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
保护动物的标语
2014/06/11 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
汽车销售合同文本
2019/08/08 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android