Javascript；通过分配给变量创建的函数？ [复制]

Posted 2023-02-22

【中文标题】Javascript；通过分配给变量创建的函数？ [复制]

【英文标题】：Javascript; functions created by assigning to a variable? [duplicate]

【发布时间】：2014-01-24 16:25:47

【问题描述】：

想就此获得一些意见。在编写 javascript 时，我习惯于创建这样的函数：

function firstThing() 
    console.log("first");
;

我正在关注一个教程，并看到了这个设置。使用变量赋值，然后传递一个匿名函数，然后...成为函数名。是否有理由使用它而不是上面的“传统”方式？

var secondThing = function() 
    console.log("second");
;

调用它们是一样的：

firstThing()
secondThing()

【参考方案1】：

还有一个区别。第一个创建一个命名函数，第二个选项将创建一个匿名函数。

当您查看堆栈跟踪时，第二个选项将显示为匿名函数，第一个选项将显示为已命名。您可以看到第一种方法如何在调试时为您提供一些洞察力。

一些进一步的参考here和here。

【讨论】：

在 Javascript 中查看堆栈跟踪的首选方法是什么？

【参考方案2】：

这称为函数表达式：

var foo = function() 

这是一个函数声明：

function foo() 

一个主要的区别是函数声明是“提升的”。在幕后，函数声明被“提升”到其作用域的顶部并分配给变量名 - 实际上与函数表达式相同。

考虑一下：

foo(); //logs 'abc'
function() 
  console.log('abc');

这很好，因为foo 将被提升。使用函数表达式，这将失败：

foo(); //foo is not defined!
var foo = function() 
  console.log('abc');

关于函数表达式的一个很棒的地方是，您可以使用 IIFE（立即调用函数表达式）来分配它们的值，并拥有像这样的私有值和函数：

var myFunc = (function() 
  function thisWillBeMyFunc() 
    doOne();
    doTwo();
    doThree();
  

  function doOne() 
    console.log('Action 1!');
  
  function doTwo() 
    console.log('Action 2!');
  
  function doThree() 
    console.log('Action 3!');
  

  return thisWillBeMyFunc;
());

myFunc(); //logs the actions

doOne(); //error - not defined!

Live demo (click).

哦，JavaScript 的强大功能和灵活性！

【讨论】：

我记得有一天我读到了一篇精彩的文章，但此刻我找不到比dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/… 更好的东西——实际上它表明我错了。所以好像我混淆了一些东西hmmmmmmm。这很奇怪，因为我正在阅读我找不到的那篇文章 - 这两个步骤之间有很大的区别。所以，是的，似乎它 IS 提升了，我很久以前就想错了：-S

我知道这被标记为重复，但我很欣赏讨论/示例。只是为了好玩：jsfiddle.net/8UTFD/3jsfiddle.net/8UTFD/4