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 相关文章推荐
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
JS canvas实现画板和签字板功能
Feb 23 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面向对象全攻略 (九)访问类型
2009/09/30 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
分分钟入门python语言
2018/03/20 Python
python中的变量如何开辟内存
2018/06/26 Python
django富文本编辑器的实现示例
2019/04/10 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Django values()和value_list()的使用
2020/03/31 Python
python实例化对象的具体方法
2020/06/17 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
毕业研究生的自我鉴定
2013/11/30 职场文书
努力学习演讲稿
2014/05/10 职场文书
本科毕业生自荐信
2014/05/26 职场文书
教学反思怎么写
2016/02/24 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
利用Redis实现点赞功能的示例代码
2022/06/28 Redis