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 弹出框口并返回值的两种常用方法
Dec 30 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
js中作用域的实例解析
Mar 16 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
JavaScript 实现继承的几种方式
Feb 19 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 empty函数报错解决办法
2014/03/06 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
php实现简单加入购物车功能
2017/03/07 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python实现的二维码生成小软件
2014/07/11 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Windows下安装Scrapy
2018/10/17 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python安装scipy的方法步骤
2019/06/26 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
学生安全承诺书
2014/05/22 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
九华山导游词
2015/02/03 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
mysql 索引合并的使用
2021/08/30 MySQL
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android