下面的JS代码会报错，请问原因？

Question

javascriptvar x = 0;
var foo = function(callback){
  return window.setTimeout(callback, 17);
}  
(function sayX(){
  x += 1;
  console.log(x);
  foo(sayX);
}())

报错信息： Uncaught TypeError: foo is not a function
测试环境： chrome 44.0.2403.130 m

PS: 最好能深入的说明一下原因。

Answer 1

不是特别清楚你的意图，你是想这样：

var x = 0;
var foo = function(callback){
  return window.setTimeout(callback, 17);
}; //此处加分号 
(function sayX(){
  x += 1;
  console.log(x);
  foo(sayX);
}())

还是这样：

var x = 0;
function foo(callback){
  return window.setTimeout(callback, 17);
}
(function sayX(){
  x += 1;
  console.log(x);
  foo(sayX);
}())

}后跟(就直接被调用了。你那样写是在给foo赋一个匿名函数的执行结果，不是在定义函数。

把你那段代码拆开就变成：

var x = 0;
var foo;
function anonymous(callback){
  return window.setTimeout(callback, 17);
};
foo = anonymous(function sayX(){
  x += 1;
  console.log(x);
  foo(sayX);
}());

当然会出错

Answer 2

改成这个就可以了
var x = 0;
function foo(callback){
return window.setTimeout(callback, 17);
}
(function sayX(){
x += 1;
console.log(x);
foo(sayX);
}())

Answer 3

楼上说的对，加个分号就可以了。我补充一下原因吧，为什么会报这个错。
在不加分号的情况下，

var foo = function(callback){
  return window.setTimeout(callback, 17);
}  
(function sayX(){
  x += 1;
  console.log(x);
  foo(sayX);
}())//加括号这部分先执行

这其实就是一个语句，加了括号的后面部分先执行，就会报楼主说的那个错。这种情况就类似于1+(2+3),先计算了2+3。
加了分号后就变成了两个语句stat1,stat2,按照先后顺序执行，即会正确执行。
良好的编程习惯是不要漏掉句尾的分号，从而避免类似的错误。

Answer 4

这个的原因其实很多地方都有讲，就是js的声明提前。
简单说就是变量声明会被放到最前面。
而你的匿名函数的声明被提前，又是立即执行的，此时foo仅仅是一个变量，并没有被赋值，所以就是这样了。