调用函数报错函数未定义

I discovered this little trick while watching the famous Paul Irish video about the jQuery source code.

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

That video comes from a different era and it’s 9 years old at the time of writing, and the jQuery source code has changed since, so you can’t spot this thing in there, but it’s still something I found interesting.

该视频来自不同的时代,在撰写本文时已经有9年的历史了,此后jQuery源代码已经发生了变化,因此您无法在其中发现该东西,但这仍然是我发现的有趣之处。

Also, JavaScript has since changed. This technique only applied to pre-ES5 JavaScript.

此外,JavaScript也发生了变化。 此技术仅适用于ES5之前JavaScript。

Before ES5, released in 2009, this was an almost required step.

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

Note: ES5+ codebases do not need to add this any more because now undefined is a read-only value.

注意:ES5 +代码库无需再添加它,因为现在undefined是只读值。

Sometimes in our code we do check variables to see if they are undefined, in this way:

有时,在我们的代码中,我们会通过以下方式检查变量以查看它们是否未定义:

if (car !== undefined) {

}

If this is our code, that runs on our own servers, which we control, this should work fine. But imagine that a library like jQuery needs to be battle tested, to work on every possible site.

如果这是我们的代码,并且在我们控制的我们自己的服务器上运行,则应该可以正常工作。 但是想象一下,像jQuery这样的库需要经过实战测试,才能在每个可能的站点上工作。

If someone overwrites undefined with a simple

如果有人用一个简单的覆盖undefined

undefined = '🤔' //whatever value you prefer

then the above if would fail, comparing car to 🤔.

则上述if失败,将car🤔进行比较。

This has since been fixed in ES5, but was possible before that.

此问题已在ES5中修复,但在此之前是可能的。

If car was actually undefined, there was no way to find out now.

如果car实际上是不确定的,那么现在就找不到办法。

Except using this technique: we wrap all our code in an IIFE (Immediately-invoked Function Expression) and we pass one parameter to the function definition, without adding it in the invocation phase.

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

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

See, undefined is passed as argument, but not passed as a parameter when we invoke the function. So, inside the function the value of the variable undefined is (guaranteed) the original value of undefined. No matter what other scripts on the page do to it, it’s isolated.

看, undefined是作为参数传递的,但在调用函数时不会作为参数传递。 因此,在函数内部,变量undefined的值是(保证) undefined的原始值。 无论页面上其他脚本执行什么操作,它都是孤立的。

Now, my favorite way to solve this problem is to use this technique to check for undefined values:

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

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

}

The typeof operator returns a string with the type of a variable. We can check it against the 'undefined' string, and we wouldn’t have the above problem in the first place.

typeof运算符返回具有变量类型的字符串。 我们可以对照'undefined'字符串来检查它,而我们首先不会遇到上述问题。

But it’s always good to know the reasons about some things you can read on code written by others, especially when it’s library-level code that need to run everywhere.

但是,总是知道一些可以在其他人编写的代码上阅读的东西的原因,尤其是当它需要在任何地方运行的库级代码时,总是如此。

翻译自: https://flaviocopes.com/javascript-iife-undefined/

调用函数报错函数未定义

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐