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 相关文章推荐
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
vuex存储token示例
Nov 11 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
vant自定义二级菜单操作
Nov 02 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
PHP垃圾回收机制简单说明
2010/07/22 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
python绘制圆柱体的方法
2018/07/02 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
学校爱心捐款倡议书
2014/05/13 职场文书
助学感谢信范文
2015/01/21 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫