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也能使用EXTJS视频演示
Dec 29 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
js实现返回顶部效果
2017/03/10 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python提取网页中超链接的方法
2016/09/18 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
LINUX下线程,GDI类的解释
2016/12/14 面试题
教育局长自荐信范文
2013/12/22 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
竞聘演讲稿
2014/04/24 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015年化验室工作总结
2015/04/23 职场文书
停车场管理制度范本
2015/08/05 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
2016大学军训心得体会
2016/01/11 职场文书