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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
javascript表格的渲染组件
Jul 03 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 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入门速成教程
2007/03/19 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JQuery球队选择实例
2015/05/18 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
vue中过滤器filter的讲解
2019/01/21 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python中整数的缓存机制讲解
2019/02/16 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
执行Python程序时模块报错问题
2020/03/26 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
python获取对象信息的实例详解
2021/07/07 Python
Python IO文件管理的具体使用
2022/03/20 Python