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

查看:113
本文介绍了高级JavaScript:这个函数为什么用圆括号包装?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述


可能存在重复:


我遇到过这么一段JavaScript代码,但我不知道该怎么做。为什么我运行此代码时会得到1? (1)这个奇怪的小附录是什么,为什么函数用圆括号包装?

 (function(x){
删除x;
返回x;
})(1);


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

 (function(){
//一些代码
})();

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

 函数foo(){
//某些代码
}
foo();

但是这需要给函数一个名字,这并不总是必需的。使用命名函数还意味着在将来的某个点可能再次调用该函数,这可能不合意。通过以这种方式使用匿名函数,您可以确保只执行一次。



此语法无效:

  function(){
//一些代码
}();

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

因此,快速回顾IIFE模式:

 (function(){
//一些代码
})();

允许立即执行一些代码,就好像它只是内联编写的一样,它的范围以免影响全局名称空间(因此可能会干扰或受到其他脚本的干扰)。例如,您可以使用普通函数,例如,

 (function(x){
//某些代码
})(1);

所以我们将值'1'作为第一个参数传递给函数,作为一个本地作用域变量,名为x。



其次,你有这个函数代码本身的内涵:

  delete x; 
return x;

删除操作符将从对象中移除属性。它不会删除变量。所以;

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

结果记录在这里:

  {'baz':5} 

鉴于

  var foo = 4; 
删除foo;
console.log(foo);

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



许多人认为删除可以删除变量,因为autoglobals的工作方式。如果您在没有首先声明变量的情况下分配变量,它实际上不会变成变量,而是全局对象上的属性:

  bar = 4; //注意缺少'var'。糟糕的做法!千万不要这样做! 
删除栏;
console.log(bar); //错误 - 栏未定义。

这次删除起作用,因为您并未删除变量,而是全局属性目的。实际上,前面的代码片段相当于这个:

  window.bar = 4; 
删除window.bar;
console.log(window.bar);

现在您可以看到它与foo对象示例类似,而不是foo变量示例。 / p>

Possible Duplicate:
What is the (function() { } )() construct in JavaScript?

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);

解决方案

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

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

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.

This syntax is invalid:

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

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/

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);

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);

Results in this being logged:

{'baz':5}

Whereas,

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

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

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);

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆