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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
详解vue中移动端自适应方案
May 05 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
Vue的Options用法说明
Aug 14 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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经典面试题之设计模式(经常遇到)
2015/10/15 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
不同Jquery版本引发的问题解决
2013/10/14 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python扩展内置类型详解
2018/03/26 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python:动态路由的Flask程序代码
2019/11/22 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
用python绘制樱花树
2020/10/09 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
中专毕业自我鉴定
2013/10/16 职场文书
财务经理的岗位职责
2013/12/17 职场文书
法制宣传实施方案
2014/03/13 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
员工自我评价范文
2015/03/11 职场文书
给病人的慰问信
2015/03/23 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
不同意离婚上诉状
2015/05/23 职场文书
归途列车观后感
2015/06/17 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书