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 来操作字符串(一些字符串函数)
Feb 15 Javascript
JS启动应用程序的一个简单例子
May 11 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
jQuery操作css样式
2017/05/15 jQuery
js+html5生成自动排列对话框实例
2017/10/09 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python实现批量图片格式转换
2020/06/16 Python
python的concat等多种用法详解
2018/11/28 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
幼儿园中班新学期寄语
2014/01/18 职场文书
团委竞选演讲稿
2014/04/24 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS