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函数的引用, 关于内存的开销
Sep 17 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
react+redux的升级版todoList的实现
Dec 18 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
深入详解JS函数的柯里化
Jun 09 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获取金书网的书名的实现代码
2010/06/11 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python实现不规则图形填充的思路
2020/02/02 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Python tornado上传文件的功能
2020/03/26 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
学会感恩主题班会
2015/08/12 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android