0

我知道使用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();什么？

4

1 回答 1

0

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

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

[...]
    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["ControlPanel"]在.Mathis

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

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

于 2021-08-28T11:39:24.917 回答