帮助理解 javascript 全局消除技术

Question

来自 DailyJS “让我们构建一个 JavaScript 框架” 我'我不太确定以下代码，显然用作全局抑制技术。

到目前为止，我的理解对 (function(){}) 犹豫不决。我理解设置图灵变量，将 global.turing 设置为图灵，并返回 window 或 this （如果不在浏览器中），但是 (function(global){})(this 或 window) 的事情让我感到困惑......我见过像

var mything = {} 这样的东西，并将所有代码设置在 mything 下，但这个习惯用法让我有点困惑。

我真的很想理解这里的推理，而不是记住它“有效”

(function(global) {
  var turing = {
    VERSION: '0.0.1',
    lesson: 'Part 1: Library Architecture'
  };

  if (global.turing) {
    throw new Error('turing has already been defined');
  } else {
    global.turing = turing;
  }
})(typeof window === 'undefined' ? this : window);

Answer 1

（这个答案已有 4 年多了（截至 2015 年 4 月），虽然它仍然正确，但我认为它需要更一般的解释 - 见下文）

原始答案

将此视为：

(function (x) {
    // ...
})(y);

作为：

function functionName(x) {
    // ...
}
functionName(y);

但没有需要给它一个名称（如 functionName）。

所以这：

(function(global) {
    // ...
})(typeof window === 'undefined' ? this : window);

真的只是：

function functionName(global) {
    // ...
}
functionName(typeof window === 'undefined' ? this : window);

它是一个只有一个参数的函数（在函数内称为 global ），并且使用 typeof window === 'undefined' 调用它？ this : window 与: 的含义相同，

function functionName(global) {
    // ...
}
if (typeof window === 'undefined') {
    functionName(this);
} else {
    functionName(window);
}

但使用更短的符号（并且不命名函数）。

更一般的解释

我在 4 年前写了这个答案，我认为是时候对这里涉及的概念添加一些更一般的解释了。

正如我上面所解释的， this:

(function (x) {
    // ...
})(y);

是 this: 的匿名版本，

function functionName(x) {
    // ...
}
functionName(y);

它（如果你只调用一次）通常（参见下面的例外情况）也与此相同：

function functionName() {
    var x = y;
    // ...
}
functionName();

立即返回匿名被调用的函数，this:

(function (x) {
    // ...
})(y);

和 this: 是一样的，

(function () {
    var x = y;
    // ...
})();

这对大多数人来说可能有更明显的含义。 （这里立即调用的函数没有参数，仅用于为变量和其他嵌套函数提供一个隔离的作用域，这样我们就不会污染外部或全局作用域 - 这也是在中使用参数的主要原因首先立即调用匿名函数。）

关于括号

顺便说一下，this:

(function () {
    // ...
})();

与 this: 相同：

(function () {
    // ...
}());

由于语言歧义，函数周围的括号是必需的，但它们可能包含 ()实际上调用该函数，也可能不调用该函数 - 尽管有些人认为这里的第二种形式看起来更清晰。请参阅Douglas Crockford 的解释了解更多详细信息以及为什么他认为第一个版本看起来像“狗球。”

并且

之前我说过 this:

(function (x) {
    // ...
}(y));

与 this: 相同，

(function () {
    var x = y;
    // ...
}());

对于一个参数来说，这在大多数情况下都是正确的（这不会在外部作用域中屏蔽同名变量，同时又取决于其值）并且通常对于多个参数都是正确的（如果它们也不相互依赖）。我希望通过示例可以更加清楚。

当我们有这段代码时：

(function (x) {
    // ...
}(x + 1));

那么我们不能将其翻译为：

(function () {
    var x = x + 1;
    // ...
}());

因为在第一个版本中，我们将 1 添加到 outer x 并将结果绑定到 inside x 一旦我们进入函数内部，我们就只有内部 x 可以使用（甚至是新的 let 语句对我们没有帮助）。

另一个例子：

(function (x, outer_x) {
    // ...
}(1, x));

在这里，您可以将外部作用域中的 old_x 设置为 x 的值，并将内部作用域中的 x 设置为新值 1 ，而且您不必担心订单。但如果你这样做了：

摘要

因此，正如你所看到的，在某些情况下你不能简单地将： 翻译

(function (x) {
    // ...
}(y));

成：

(function () {
    var x = y;
    // ...
}());

但我认为，如果它可以翻译成第二种形式，那么它应该是为了可读性。特别是对于较大的函数，您必须滚动到函数末尾才能知道函数顶部使用的变量的含义，这很不方便。

回到问题

这意味着我会将这段代码从问题：

(function(global) {
  var turing = {
    VERSION: '0.0.1',
    lesson: 'Part 1: Library Architecture'
  };

  if (global.turing) {
    throw new Error('turing has already been defined');
  } else {
    global.turing = turing;
  }
})(typeof window === 'undefined' ? this : window);

翻译成：

(function () {
  var global = typeof window === 'undefined' ? this : window;
  var turing = {
    VERSION: '0.0.1',
    lesson: 'Part 1: Library Architecture'
  };

  if (global.turing) {
    throw new Error('turing has already been defined');
  } else {
    global.turing = turing;
  }
}());

我希望这个答案解释了为什么这两个是等价的，甚至可以写成：

(function (global, turing) {
  if (global.turing) {
    throw new Error('turing has already been defined');
  } else {
    global.turing = turing;
  }
})(typeof window === 'undefined' ? this : window,
   {VERSION: '0.0.1', lesson: 'Part 1: Library Architecture'});

并且它仍然意味着相同，虽然很多同时可读性较差。

另请参阅我的其他答案，其中我解释了类似的概念。

Answer 2

这是一个匿名函数或 lambda 函数。大多数语言都支持这一点。

使用匿名函数实际上是作者的偏好问题。如果不设置匿名函数来处理先前调用的返回值，则必须通过初始化变量来包含返回的对象，然后在稍后将其传递给全局声明的函数，从而在客户端分配额外的内存。串行方式。

如果是1次函数，则节省空间、内存、时间。

作为旁注：通过谷歌搜索函数式编程背后的一些概念，您可能会对此有更好的感觉。 Lambda 函数最近似乎很流行，尤其是在 Python 中。