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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
对vue中v-if的常见使用方法详解
Sep 28 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
详解用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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python配置grpc环境
2019/01/01 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
手术室护士个人总结
2015/02/13 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技