传递undefined给JavaScript立即调用的函数表达式

50 阅读2分钟

有时你可以在野外发现一些旧的代码,其中`undefined`被传递给一个函数。为什么呢?

我在看著名的Paul Irish关于jQuery源代码的视频时发现了这个小技巧。

那个视频来自不同的时代,在写这篇文章的时候已经是9年前的事了,而且jQuery的源代码后来也发生了变化,所以你不能在里面发现这个东西,但我还是觉得很有趣。

另外,JavaScript后来也发生了变化。这个技术只适用于ES5之前的JavaScript。

在2009年发布的ES5之前,这几乎是一个必须的步骤。

注意:ES5+代码库不需要再添加这个了,因为现在undefined 是一个只读的值。

有时在我们的代码中,我们确实通过这种方式来检查变量是否未定义。

if (car !== undefined) {

}

如果这是我们的代码,运行在我们自己的服务器上,由我们控制,这应该是很好的。但是想象一下,像jQuery这样的库需要进行战斗测试,以便在每个可能的网站上工作。

如果有人用一个简单的undefined

undefined = '🤔' //whatever value you prefer

那么上面的if 将会失败,比较car🤔

这在ES5中已经被修复了,但在那之前是可能的。

如果car 实际上是未定义的,现在没有办法发现。

除了使用这种技术:我们把所有的代码包在一个IIFE(立即调用的函数表达式)中,并把一个参数传给函数定义,而不在调用阶段加入。

(function() {
  /* our function code */
})()
(function(undefined) {
  /* our function code */
})()

请看,undefined 作为参数被传递,但在我们调用函数时没有作为参数传递。因此,在函数内部,变量undefined 的值是(保证)undefined 的原始值。无论页面上的其他脚本对它做什么,它都是孤立的。

现在,我最喜欢的解决这个问题的方法是使用这个技术来检查未定义的值。

if (typeof car !== 'undefined') {

}

typeof 操作符会返回一个带有变量类型的字符串。我们可以对照'undefined' 字符串进行检查,这样我们就不会有上述问题了。

但是,对于一些你能在别人写的代码上读到的东西,知道其原因总是好的,特别是当它是需要到处运行的库级代码时。