【问题标题】:The difference between the two functions? ("function x" vs "var x = function") [duplicate]两个函数的区别? (“函数x”与“var x =函数”)[重复]
【发布时间】:2010-09-11 23:41:25
【问题描述】:

可能重复:
JavaScript: var functionName = function() {} vs function functionName() {}

两者有什么区别:

function sum(x, y) {
  return x+y;
}

// and 

var sum = function (x, y) {
    return x+y;
}

为什么使用一个而不是另一个?

【问题讨论】:

  • 不使用name函数,只使用匿名函数封装,防止变量污染全局作用域

标签: javascript


【解决方案1】:

第一个称为命名函数,第二个称为匿名函数。

关键的实际区别在于何时可以使用 sum 函数。例如:-

var z = sum(2, 3);
function sum(x, y) {
    return x+y;
}

z 被分配 5 而这个:-

var z = sum(2, 3);
var sum = function(x, y) {
    return x+y;
}

将失败,因为在第一行执行时变量 sum 尚未分配给函数。

命名函数在执行开始之前被解析并分配给它们的名字,这就是为什么命名函数可以在其定义之前的代码中使用。

通过代码分配函数的变量显然只能在执行超过分配后才能用作函数。

【讨论】:

    【解决方案2】:

    第一个倾向于使用有几个原因:

    1. 名称“sum”出现在 进行调试的堆栈跟踪 在许多浏览器中更容易。
    2. 名称 “sum”可以在里面使用 功能体,使其更容易 用于递归函数。
    3. 函数声明被“提升” 在javascript中,所以在第一种情况下, 该功能保证为 只定义一次。
    4. 分号插入原因

      var f = function (x) { return 4; }
      
      (f)
      

      将 4 分配给 f

    不过,有一些注意事项需要牢记。 不要这样做

      var sum = function sum(x, y) { ... };
    

    在 IE 6 上,因为它会导致创建两个函数对象。如果你这样做尤其令人困惑

      var sum = function mySym(x, y) { ... };
    

    按照标准, 函数总和(x,y){ ... } 不能出现在 if 块或循环体中,因此不同的解释器会处理

      if (0) {
        function foo() { return 1; }
      } else {
        function foo() { return 2; }
      }
      return foo();
    

    不同。 在这种情况下,你应该这样做

      var foo;
      if (0) {
        foo = function () { return 1; }
      } ...
    

    【讨论】:

    • 关于 if 语句的要点。但我不认为保证函数只定义一次是真的。 (或者我误解了你的意思?)
    • 我不确定我是否理解您在第 4 点中所说的话..
    • 我也不明白exactly once 语句。同一个函数名可能存在不同定义,最后一个定义获胜。
    • 你有关于将命名函数分配给变量的声明的任何参考吗?据我所知,只创建了一个函数。
    • 抱歉,第 4 点有点乱码。我的意思是 var f = function f() { return 4; } /* 这里换行 */ (0);被解释为 var f = (function f() { return 4; })(0);
    【解决方案3】:

    第一个是命名函数语句,第二个将匿名函数表达式分配给变量。

    函数语句会立即添加到它的作用域中——您不需要在调用它之前运行它,所以这是可行的:

    var y = sum(1, 2);
    
    function sum(x, y) {
       return x + y;
    }
    

    但是函数表达式只在代码执行时才赋值给变量,所以这样不行:

    // Error here because the function hasn't been assigned to sum yet.
    var y = sum(1, 2);
    
    var sum = function(x, y) {
       return x + y;
    }
    

    表达式形式的一个优点是您可以使用它在不同的点为表达式分配不同的函数 - 因此您可以更改函数,或在不同的条件下使用不同的函数(例如取决于正在使用的浏览器)。

    命名函数语句的一个优点是调试器将能够显示名称。虽然,您可以命名函数表达式:

    var sum = function sum(x, y) {
       return x + y;
    }
    

    但这可能会造成混淆,因为这两个名称实际上是在不同的范围内并指代不同的事物。

    【讨论】:

      【解决方案4】:

      您在此处发布的两个代码 sn-ps 几乎在所有方面都表现相同。

      但是,行为上的不同在于,对于第二种变体,该函数只能在代码中的该点之后调用。

      对于第一个变体,该函数可用于在声明函数的位置之上运行的代码。

      这是因为对于第二个变体,函数在运行时被分配给变量 foo。首先,函数在解析时被分配给标识符 foo。

      更多技术信息

      Javascript 有三种定义函数的方式。

      1. 您的第一个示例是函数声明。这使用 "function" 语句 来创建一个函数。该函数在解析时可用,并且可以在该范围内的任何位置调用。您以后仍然可以将其存储在变量或对象属性中。
      2. 您的第二个 sn-p 显示了一个函数表达式。这涉及使用 "function" 运算符 创建一个函数 - 该运算符的结果可以存储在任何变量或对象属性中。这样,函数表达式就很强大了。函数表达式通常被称为“匿名函数”,因为它不必有名称,
      3. 定义函数的第三种方法是“Function()”构造函数,您的原始帖子中没有显示。不建议使用它,因为它的工作方式与 eval() 相同,但存在问题。

      【讨论】:

        【解决方案5】:

        区别是……

        这是一个无名函数

        var sum = function (x, y) {
            return x+y;
        }
        

        所以如果你警告(总和);你得到“函数(x,y){return x + y;}”(无名) 虽然这是一个命名函数:

        function sum(x, y) {
                return x+y;
        }
        

        如果您警告(总和);现在你得到 "function sum(x, y) { return x + y; }" (name is sum)

        如果您使用探查器,则使用命名函数会有所帮助,因为探查器可以告诉您函数sum的执行时间......等等,而不是未知函数的执行时间......等等

        【讨论】:

          【解决方案6】:

          这是另一个例子: 函数 sayHello(name) { alert('hello' + name) }

          现在,假设你想修改一个按钮的 onclick 事件,比如它说“hello world”

          你不能写:

          yourBtn.onclik = sayHello('world'),因为你必须提供一个函数引用。

          那么你可以使用第二种形式: yourBtn.onclick = function() { sayHello('workld'); }

          Ps:对不起我的英语不好!

          【讨论】:

            【解决方案7】:

            它们的意思完全相同。这只是语法糖。后者是 IMO 更能揭示 JavaScript 真正在做什么;即“sum”只是一个变量,用函数对象初始化,然后可以用其他东西代替:

            $ js
            js> function sum(x,y) { return x+y; }
            js> sum(1,2);
            3
            js> sum=3
            3
            js> sum(1,2);
            typein:4: TypeError: sum is not a function
            js> sum
            3
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2012-10-01
              • 1970-01-01
              • 2015-10-13
              • 1970-01-01
              • 2020-08-30
              • 2015-03-15
              • 2013-02-14
              • 2015-10-09
              相关资源
              最近更新 更多