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的表格排序
Sep 11 Javascript
再论Javascript的类继承
Mar 05 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
angular4自定义组件详解
Sep 28 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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之PHP语法学习笔记1
2006/12/17 PHP
php5.3 废弃函数小结
2010/05/16 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP培训要多少钱
2017/06/06 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python 函数返回值的示例代码
2019/03/11 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
汽车专业学生自我评价
2014/01/19 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
起诉离婚协议书样本
2014/11/25 职场文书