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中:input和input的区别分析
Jul 13 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JS前端加密算法示例
Dec 22 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
如何利用node转发请求详解
Sep 17 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 异常处理实现代码
2009/03/10 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python实现人工蜂群算法
2020/09/18 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
车间组长岗位职责
2013/12/20 职场文书
小学教师师德反思
2014/02/03 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
个人工作总结范文2014
2014/11/07 职场文书
未中标通知书
2015/04/17 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
R9700摩机记
2022/04/05 无线电
Win11查看设备管理器
2022/04/19 数码科技