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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
使用preload预加载页面资源时注意事项
Feb 03 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实现的生成静态HTML速度快类库
2007/03/31 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python实现电子词典
2020/04/23 Python
python通过smpt发送邮件的方法
2015/04/30 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
简单了解django文件下载方式
2020/02/10 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
高山背包:High Sierra
2017/11/23 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
项目建议书模板
2014/05/12 职场文书
门店业绩提升方案
2014/06/08 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
团结友爱主题班会
2015/08/13 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL
spring boot实现文件上传
2022/08/14 Java/Android