我想知道这是什么意思:

(function () {

})();

这是在说document。onload吗?


当前回答

这是Javascript中立即调用的函数表达式:

为了理解JS中的IIFE,让我们分解一下:

表达式:返回值的东西 示例:在chrome控制台中尝试以下操作。这些是JS中的表达式。

A = 10 输出= 10 (1 + 3) 输出= 4

函数表达式: 例子:

函数表达式 var greet = function(name){ 返回“Namaste” + ' ' + 名称; } 问候(“桑托什”);

函数表达式如何工作: - JS引擎第一次运行时(执行上下文-创建阶段),这个函数(上面=右侧)不会被执行或存储在内存中。变量'greet'被JS引擎赋值为'undefined'。 -在执行期间(执行上下文-执行阶段),函数对象是动态创建的(尚未执行),被分配给'greet'变量,可以使用'greet(' someename ')'调用。

3.立即调用的函数表达式:

例子:

// IIFE
var greeting = function(name) {
    return 'Namaste' + ' ' + name;
}('Santosh')

console.log(greeting)  // Namaste Santosh. 

IIFE如何运作: -注意函数声明后面的'()'。每个函数对象都有一个可调用的'CODE'属性。我们可以使用大括号'()'调用它。 -所以这里,在执行期间(执行上下文-执行阶段),函数对象被创建并同时执行 -所以现在,greeting变量没有函数对象,而是有它的返回值(一个字符串)

JS中IIFE的典型用例:

下面的IIFE模式是非常常用的。

// IIFE 
// Spelling of Function was not correct , result into error
(function (name) {
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

我们在这里做两件事。 a)将函数表达式包装在大括号()中。这将告诉语法解析器放在()中的whatever是一个表达式(在本例中是函数表达式),并且是一个有效的代码。 b)我们同时调用这个函数,在它的末尾使用()。

因此,这个函数同时被创建和执行(IIFE)。

IIFE的重要用例:

IIFE使我们的代码安全。 -作为一个函数,IIFE有自己的执行上下文,这意味着在它内部创建的所有变量都是这个函数的局部变量,不与全局执行上下文共享。

假设我的应用程序中使用了另一个JS文件(test1.js)和life . JS(见下文)。

// test1.js

var greeting = 'Hello';

// iife.js
// Spelling of Function was not correct , result into error
(function (name) { 
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

console.log(greeting)   // No collision happens here. It prints 'Hello'.

所以IIFE帮助我们编写安全的代码,这样我们就不会无意中与全局对象发生冲突。

其他回答

这个函数称为自调用函数。自调用(也称为自执行)函数是在定义之后立即调用(已调用)的无名(匿名)函数。点击这里阅读更多

这些函数的作用是,当函数被定义时,函数立即被调用,这节省了时间和额外的代码行(与在单独的行上调用相比)。

这里有一个例子:

(函数(){ Var x = 5 + 4; console.log (x); }) ();

该构造称为立即调用函数表达式(IIFE),这意味着它将立即执行。可以把它看作是解释器到达该函数时自动调用的函数。

最常见的用例:

它最常见的用例之一是限制通过var创建的变量的作用域。通过var创建的变量的作用域仅限于一个函数,因此这个构造(这是一个围绕某些代码的函数包装器)将确保你的变量作用域不会泄漏到该函数中。

在下面的例子中,count在立即调用的函数之外是不可用的,即count的作用域不会泄漏到函数之外。您应该得到一个ReferenceError,如果您尝试在立即调用的函数之外访问它。

(function () { 
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

ES6备选方案(推荐)

在ES6中,我们现在可以通过let和const创建变量。它们都是块范围的(不像var是函数范围的)。

因此,对于上面提到的用例,您不必使用IIFE的复杂构造,现在可以编写更简单的代码,以确保变量的作用域不会泄漏到所需的块中。

{ 
    let count = 10;
}
console.log(count);  // ReferenceError: count is not defined

在本例中,我们使用let定义count变量,使count限制在我们用花括号{…}创建的代码块中。

我称之为“卷毛监狱”。

使用自调用匿名函数的原因是它们永远不应该被其他代码调用,因为它们“设置”了要调用的代码(同时为函数和变量提供了作用域)。

换句话说,它们就像在程序开始时“创建类”的程序。在它们被实例化(自动)之后,唯一可用的函数是匿名函数返回的那些函数。然而,所有其他“隐藏”函数仍然存在,以及任何状态(在作用域创建期间设置的变量)。

非常酷。

它只是一个匿名函数,在创建后立即执行。

这就像你把它赋值给一个变量,然后在后面使用它,只是没有变量:

var f = function () {
};
f();

在jQuery中,有一个类似的构造,你可能会想到:

$(function(){
});

这是绑定就绪事件的简写形式:

$(document).ready(function(){
});

但是上面的两个结构都不是iife。

它是一个立即调用的函数表达式,简称IIFE。它在创建后立即执行。

它与任何事件的任何事件处理程序(例如document.onload)无关。 考虑第一对括号中的部分:(function(){})();....它是一个正则函数表达式。然后看最后一对(function(){})();,它通常被添加到表达式中来调用函数;在这种情况下,我们之前的表达式。

当试图避免污染全局名称空间时,通常使用此模式,因为在IIFE中使用的所有变量(像在任何其他正常函数中一样)在其作用域之外是不可见的。 这可能就是为什么您将此结构与window的事件处理程序混淆的原因。Onload,因为它经常被这样使用:

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Guffa建议的更正:

函数在创建后立即执行,而不是在解析后执行。整个脚本块在执行其中的任何代码之前都会被解析。此外,解析代码并不自动意味着它被执行,例如,如果IIFE在函数内部,那么直到函数被调用,它才会被执行。

更新 因为这是一个非常流行的话题,值得一提的是,IIFE也可以用ES6的箭头函数来编写(就像Gajus在评论中指出的那样):

((foo) => {
 // do something with foo here foo
})('foo value')