问题
碰到了一个很诡异的问题,函数明明定义了,却报错说函数没定义,代码如下:
js
var 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
解决
后来经过提问,和查找资料, 大概明白了其中的缘由,故写此文。
这个问题涉及到一个"自动分号插入",具体到这个问题,就是:
1. 函数声明会自动插入引号;
2. 函数表达式不会自动插入分号;
function foo() {
} // 函数声明会自动添加分号,不需要添加分号
var foo = function() {
}; // 函数表达式不会自动添加分数,最好添加分号
具体到这个问题,由于foo 函数表达式后面没有分号,于是代码等价于:
js
var x = 0; var foo = function(callback){ return window.setTimeout(callback, 17); }(function sayX(){ x += 1; console.log(x); foo(sayX); }())
插播一条知识点:
函数表达式后面跟括号就会对触发函数执行,比如var foo = function(x){ return x; }(10)
最终 foo 的值是 10 ,而不是函数
回到这个问题, 自调用函数会首先取值, 然后传入函数求值,返回给foo。
但自调用函数求值过程中遇到 foo(sayX)
时,foo还没有值,所以会报Uncaught TypeError: foo is not a function
的错误。
此时,真相大白。
感悟
不要省略分号.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。