高级 JavaScript:为什么这个函数用括号括起来? [英] Advanced JavaScript: Why is this function wrapped in parentheses?

问题描述

可能的重复:
JavaScript 中的 (function() { } )() 构造是什么?

我遇到了这段 JavaScript 代码，但我不知道该怎么做.为什么运行此代码时会得到1"?(1)的这个奇怪的小附录是什么，为什么函数用括号括起来?

I came across this bit of JavaScript code, but I have no idea what to make out of it. Why do I get "1" when I run this code? What is this strange little appendix of (1) and why is the function wrapped in parentheses?

(function(x){
    delete x;
    return x;
})(1);

推荐答案

这里有一些事情要做.首先是立即调用函数表达式 (IIFE) 模式:

There are a few things going on here. First is the immediately invoked function expression (IIFE) pattern:

(function() {
  // Some code
})();

这提供了一种在其自己的范围内执行一些 JavaScript 代码的方法.它通常用于在函数内创建的任何变量都不会影响全局范围.你可以改用这个:

This provides a way to execute some JavaScript code in its own scope. It's usually used so that any variables created within the function won't affect the global scope. You could use this instead:

function foo() {
  // Some code
}
foo();

但这需要为函数命名，这并不总是必要的.使用命名函数也意味着在未来的某个时间点可以再次调用该函数，这可能是不可取的.通过以这种方式使用匿名函数，您可以确保它只执行一次.

But this requires giving a name to the function, which is not always necessary. Using a named function also means at some future point the function could be called again which might not be desirable. By using an anonymous function in this manner you ensure it's only executed once.

此语法无效:

function() {
  // Some code
}();

因为您必须将函数括在括号中才能将其解析为表达式.更多信息在这里:http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Because you have to wrap the function in parentheses in order to make it parse as an expression. More information is here: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

快速回顾一下 IIFE 模式:

So to recap quickly on the IIFE pattern:

(function() {
  // Some code
})();

允许立即执行某些代码"，就好像它只是内联编写的一样，但也可以在其自己的范围内执行，以免影响全局命名空间(因此可能会干扰或被其他脚本干扰).

Allows 'some code' to be executed immediately, as if it was just written inline, but also within its own scope so as not to affect the global namespace (and thus potentially interfere with or be interfered with by, other scripts).

您可以像传递普通函数一样向函数传递参数，例如

You can pass arguments to your function just as you would a normal function, for example,

(function(x) {
  // Some code
})(1);

因此，我们将值1"作为第一个参数传递给函数，该函数将其作为局部作用域变量接收，命名为 x.

So we're passing the value '1' as the first argument to the function, which receives it as a locally scoped variable, named x.

其次，你有函数代码本身的胆量:

Secondly, you have the guts of the function code itself:

delete x;
return x;

删除运算符将从对象中删除属性.它不会删除变量.所以;

The delete operator will remove properties from objects. It doesn't delete variables. So;

var foo = {'bar':4, 'baz':5};
delete foo.bar;
console.log(foo);

结果被记录:

{'baz':5}

然而，

var foo = 4;
delete foo;
console.log(foo);

将记录值 4，因为 foo 是一个变量而不是一个属性，所以它不能被删除.

will log the value 4, because foo is a variable not a property and so it can't be deleted.

由于自动全局变量的工作方式，许多人认为 delete 可以删除变量.如果在没有先声明的情况下赋值给一个变量，它实际上不会成为一个变量，而是一个全局对象上的属性:

Many people assume that delete can delete variables, because of the way autoglobals work. If you assign to a variable without declaring it first, it will not actually become a variable, but a property on the global object:

bar = 4; // Note the lack of 'var'. Bad practice! Don't ever do this!
delete bar;
console.log(bar); // Error - bar is not defined.

这次删除有效，因为您删除的不是变量，而是全局对象上的属性.实际上，前面的代码段等效于:

This time the delete works, because you're not deleting a variable, but a property on the global object. In effect, the previous snippet is equivalent to this:

window.bar = 4;
delete window.bar;
console.log(window.bar);

现在您可以看到它与 foo 对象示例而不是 foo 变量示例的相似之处.

And now you can see how it's analogous to the foo object example and not the foo variable example.

这篇关于高级 JavaScript:为什么这个函数用括号括起来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！