JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍


Posted in Javascript onMarch 01, 2018

某天写代码突然县道这个问题,顺势总结一波

JavaScript 函数和变量声明的“提前”(hoist)行为

简单的说 如果我们使用 匿名函数

var a = {}

这种方式, 编译后变量声明a 会“被提前”了,但是他的赋值(也就是a)并不会被提前。

也就是,匿名函数只有在被调用时才被初始化。

如果使用

function a () {};

这种方式, 编译后函数声明和他的赋值都会被提前。

也就是说函数声明过程在整个程序执行之前的预处理就完成了,所以只要处于同一个作用域,就可以访问到,即使在定义之前调用它也可以。

看一个例子

function hereOrThere() { //function statement
  return 'here';
}
console.log(hereOrThere()); // alerts 'there'
function hereOrThere() {
  return 'there';
}

我们会发现alert(hereOrThere) 语句执行时会alert('there')!这里的行为其实非常出乎意料,主要原因是JavaScript 函数声明的“提前”行为,简而言之,就是Javascript允许我们在变量和函数被声明之前使用它们,而第二个定义覆盖了第一种定义。换句话说,上述代码编译之后相当于

function hereOrThere() { //function statement
 return 'here';
}
function hereOrThere() {//申明前置了,但因为这里的申明和赋值在一起,所以一起前置
 return 'there';
}
console.log(hereOrThere()); // alerts 'there'

我们期待的行为

var hereOrThere = function () { // function expression
  return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function () {
  return 'there';
};

这段程序编译之后相当于:

var hereOrThere;//申明前置了
hereOrThere = function() { // function expression
 return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function() {
 return 'there';
};

总结

以上所述是小编给大家介绍的JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 #Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 #Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 #Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 #Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 #Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 #Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
Python函数的周期性执行实现方法
2016/08/13 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
在线课程:Skillshare
2019/04/02 全球购物
金讯Java笔试题目
2013/06/18 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
争论的故事教学反思
2014/02/06 职场文书
外贸专业求职信
2014/03/09 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书