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 相关文章推荐
常用js脚本
Dec 03 Javascript
提高网站信任度的技巧
Oct 17 Javascript
Javascript 面向对象 继承
May 13 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
VueJs监听window.resize方法示例
Jan 17 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
详解用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学习笔记之基础知识
2014/11/08 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
jQuery find和children方法使用
2011/01/31 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现实时监控文件的方法
2016/08/26 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python命令 -u参数用法解析
2019/10/24 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
酒店副总岗位职责
2013/12/24 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
验房委托书
2014/08/30 职场文书
慰问信格式
2015/02/14 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
应收账款管理制度
2015/08/06 职场文书
干部考核工作总结
2015/08/12 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Python OpenCV 图像平移的实现示例
2021/06/04 Python