百科问答小站 logo
百科问答小站 font logo



JavaScript 中,定义函数时用 var foo = function () {} 和 function foo() 有什么区别? 第1页

  

user avatar   svjoke 网友的相关建议: 
      

这个问题其实非常好,最关键的区别在于JavaScript 函数和变量声明的“提前”(hoist)行为。

the Google style guide 建议我们采用方法一。

简单的说 如果我们使用 匿名函数

       var FUNCTION_NAME = function() { /* FUNCTION_BODY */};      

这种方式, 编译后变量声明FUNCTION_NAME 会“被提前”了,但是他的赋值(也就是FUNCTION_BODY)并不会被提前。

也就是,匿名函数只有在被调用时才被初始化。

如果我们使用

       function FUNCTION_NAME ()  { /* FUNCTION_BODY */};      

这种方式, 编译后函数声明和他的赋值都会被提前。

也就是说函数声明过程在整个程序执行之前的预处理就完成了,所以只要处于同一个作用域,就可以访问到,即使在定义之前调用它也可以。


请先看一个例子

       function hereOrThere() { //function statement   return 'here'; }  alert(hereOrThere()); // alerts 'there'  function hereOrThere() {   return 'there'; }      

我们会发现alert(hereOrThere) 语句执行时会alert('there')!这里的行为其实非常出乎意料,主要原因是JavaScript 函数声明的“提前”行为,简而言之,就是Javascript允许我们在变量和函数被声明之前使用它们,而第二个定义覆盖了第一种定义。换句话说,上述代码编译之后相当于

       function hereOrThere() { //function statement   return 'here'; }  function hereOrThere() {//申明前置了,但因为这里的申明和赋值在一起,所以一起前置   return 'there'; }  alert(hereOrThere()); // alerts 'there'      

强烈推荐阅读下面文章,JavaScript 中对变量和函数声明的“提前(hoist)”


再看下面一个例子:


       var hereOrThere = function() { // function expression   return 'here'; };  alert(hereOrThere()); // alerts 'here'  hereOrThere = function() {   return 'there'; };      

这里就是我们期待的behavior,这段程序编译之后相当于:

       var hereOrThere;//申明前置了  hereOrThere = function() { // function expression   return 'here'; };  alert(hereOrThere()); // alerts 'here'  hereOrThere = function() {   return 'there'; };       


参考

Frequently Misunderstood JavaScript Concepts

The Syntax for Defining a Function is Significant




  

相关话题

  前后端分离项目,接口返回 200 但是里面返回 500 合理吗? 
  如何看待 WebAssembly 这门技术? 
  CSS Grid 布局那么好,为什么至今没有人开发出基于 Grid 布局的前端框架呢? 
  《阮一峰版快速排序完全是错的》一文是否存在事实错误? 
  网上都说操作真实 DOM 慢,但测试结果却比 React 更快,为什么? 
  为什么网页都可以查看源代码? 
  为何浏览器控制台的JavaScript引擎性能这么差? 
  国内做前端年薪有上50W的吗? 
  如何用通俗易懂的语言解释脚本(script)是什么? 
  Flutter 革命性的地方在哪里? 

前一个讨论
女朋友要求我做绝育怎么办?
下一个讨论
以目前显卡科技发展的速度,什么时候能普及可以完美240HZ+运行4K画质大作的显卡?





© 2024-11-24 - tinynew.org. All Rights Reserved.
© 2024-11-24 - tinynew.org. 保留所有权利