像 (function () { // code; }.call(this)); 这样的语句的目的是什么在 JavaScript 模块中？ [复制]答案

【问题标题】：What is purpose of statement like (function () { // code; }.call(this)); in JavaScript module? [duplicate]像 (function () { // code; }.call(this)); 这样的语句的目的是什么在 JavaScript 模块中？ [复制]
【发布时间】：2021-10-28 00:00:32
【问题描述】：

我知道使用Function.prototype.call() 我们可以编写一个可用于不同对象的方法。

我试图理解https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js 的源代码，它的结构是这样的。我需要取消缩小才能看到这段代码。

(function () {
    // code
    // code
}.call(this));

这个模块越来越像


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
</head>

<body>
    <video class="input_video"></video>
</body>
</html>

<script>
const videoElement = document.getElementsByClassName('input_video')[0];

const camera = new Camera(videoElement, {
  onFrame: async () => {
    await someMethod({image: videoElement});
  },
  width: 320,
  height: 240
});
camera.start();
</script>

但是像 (function () { // code; }.call(this)); 这样的声明在 JavaScript 模块中的目的是什么，所以 const camera = new Camera(arg1, arg2); camera.start(); 正在工作？

【问题讨论】：

这看起来像是另一种使用 IIFE 的方式。
那是用来不污染全局范围的 Camera 内部的东西。

标签： javascript html npm minifiedjs function.prototype

【解决方案1】：

它用于导出例程，在脚本末尾调用。此方法还用于保持全局范围内没有不需要的例程。

我使用了美化器，以便更好地查看缩小后的脚本，它是自我解释的。

[...]
    var ma = this || self;

    function K(a, b) {
        a = a.split(".");
        var c = ma;
        a[0] in c || "undefined" == typeof c.execScript || c.execScript("var " + a[0]);
        for (var d; a.length && (d = a.shift());) a.length || void 0 === b ? c[d] && c[d] !== Object.prototype[d] ? c = c[d] : c = c[d] = {} : c[d] = b
    };
[...]

这是导出函数，只在最后调用：

[...]
    K("ControlPanel", Ma);
    K("Slider", W);
    K("StaticText", Ka);
    K("Toggle", La);
    K("SourcePicker", Y);
    K("FPS", V);
    K("DropDownControl", U);
}).call(this);

如果尚未在this 处定义this["ControlPanel"]，则它使用Ma（这是一个构造函数）定义它。

Function.prototype.call() 也可以用于模块化对象的赋值，如果你在 (Function(script).call(customObject)) 中执行代码，那么它就像对 vars 的导出/导入一样工作。

在这种情况下，this 应该是 window 并且只有最后命名的对象才能在创建期间调用的对象中可用，可以命名为 testIfUndefinedAndSetIt 的函数 K 不会，因为它不是必需的.这只是一个基本例程，用于测试 ControlPanel、FPS 等变量是否在全局范围内未定义并防止修改其他脚本。

【讨论】：