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 19 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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学习笔记(三)操作符与控制结构
2011/08/06 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
JS 继承实例分析
2008/11/04 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
详解Python中的变量及其命名和打印
2016/03/11 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python输入多行字符串的方法总结
2019/07/02 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
质量整改通知单
2015/04/21 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS