这两个功能的区别? (“function x”vs“var x = function”)

时间:2008-09-22 12:24:07

标签: javascript

  

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

有什么区别:

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

// and 

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

为什么一个用于另一个?

7 个答案:

答案 0 :(得分:53)

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

关键的实际区别在于何时可以使用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时尚未分配函数,所以会失败。

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

按代码分配函数的变量显然只能在执行完毕后才能用作函数。

答案 1 :(得分:12)

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

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

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

    将4分配给f

  5. 但要记住一些注意事项。 不要做

      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; }
      } ...
    

答案 2 :(得分:6)

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

函数语句会立即添加到其作用域中 - 您无需在调用它之前运行它,因此可以正常工作:

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;
}

但这可能令人困惑,因为这两个名字实际上在不同的范围内,并且指的是不同的东西。

答案 3 :(得分:3)

您发布的两个代码段几乎可以用于所有目的。

然而,行为的差异在于,对于第二个变体,该函数只能在代码中的该点之后调用。

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

这是因为对于第二个变体,该函数在运行时被赋值给变量foo。在第一个中,该函数在分析时被分配给该标识符foo。

更多技术信息

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

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

答案 4 :(得分:1)

区别在于......

这是一个无名功能

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

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

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

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

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

答案 5 :(得分:0)

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

现在,假设您想修改按钮的onclick事件,例如“hello world”

你不能写:

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

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

Ps:抱歉我的英语不好!

答案 6 :(得分:-5)

他们的意思完全相同。这只是语法糖。后者是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