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.ajax传递中文参数的解决方法
May 28 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
详解用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
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python判断Abundant Number的方法
2015/06/15 Python
Python读大数据txt
2016/03/28 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
django 中QuerySet特性功能详解
2019/07/25 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
开办加工厂创业计划书
2014/01/03 职场文书
党日活动总结
2014/05/07 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
检讨书格式
2015/01/23 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js