在任意代码片段外部添加包装函数,可以将内部的变量和函数定义“隐藏”起来,外部作用域无法访问包装函数内部的任何内容。
var a = 2; function foo() { var a = 3; console.log(a); // 3 } foo(); console.log(a); // 2
虽然这种技术可以解决一些问题,但是会导致一些额外的问题。
1、foo 这个名称本身污染了所在作用域(在这个例子中是全局作用域)
2、必须显式地通过函数名调用才能运行
为了解决额外的问题,如果函数名不需要(或者至少函数名可以不污染所在作用域),并且能够自动运行,将会更加理想
var a = 2; (function foo(){ var a = 3; console.log(a); })() console.log(a);
比较一下两段代码,第一段 foo 被绑定在全局作用域中,通过 foo 来调用它。第二段 foo 被绑定在函数表达式自身的函数中,而不是所在的作用域。foo 变量名被隐藏在自身中不会污染外部作用域
如果 function 是声明中的第一个词,那么就是一个函数声明,否则就是一个函数表达式
函数表达式最熟悉的场景可能就是回调参数了,比如
setTimeout(function(){ console.log('i wait 1 second') }, 1000)
这叫匿名函数表达式,函数表达式可以是匿名的,而函数声明则不可以省略函数名
很多库和工具也倾向鼓励使用这种风格的代码。但是它有几个缺点
1、匿名函数在栈追踪时不会显示有意义的函数名,使得调试很困难
2、一个函数需要引用自身的例子,在事件触发后事件监听器需要解绑自身,这时候做不了
3、匿名函数省略了代码可读性,一个描述性的名称可以让代码不言自明
行内函数表达式非常强大且有用-匿名和具名之间并不会对这点有任何影响,防止上述缺点,给出一个最佳实践
setTimeout(function timeoutHandler(){ console.log('i wait 1 second') }, 1000)