javascript - 为什么我的函数在严格模式(函数形式)下未定义？

Question

基本上，我的页面中有一个图像，我可以单击它以模式打开它。我之前使用的是“严格模式”(简单形式)，但由于我尝试兼容 JSHint，所以我将其更改为函数形式。现在我有了我的函数 openModal()变得未定义。

<!-- Media part -->
    <ul class="netreviews_media_part">
        <!-- media 1 (picture) -->
        <li>
            <a data-type="image" data-src="https://www.expertisez.com/images/easyblog_images/511/Authentifier-un-sac-Chanel.jpg"
                       class="netreviews_image_thumb" href="javascript:" onclick="openModal(this);"
                       style="background-image:url('https://www.expertisez.com/images/easyblog_images/511/Authentifier-un-sac-Chanel.jpg');">&nbsp;</a>
        </li>
    <ul>

JS代码(部分)

(function () {
    "use strict";
    function openModal(identifier) {
    // stuff here 
    }
}());

在这里摆弄:https://jsfiddle.net/7zd6mc65/2/

我似乎明白为什么它不起作用，感谢火箭对这个问题的回答( why does this code throw undefined in "strict mode" ):显然由于“缺乏”上下文，我的函数上下文不再被定义。

不过这里有两件事:

1 - 为什么简单的“字符串”形式(没有函数形式的“严格模式”)不会成为问题？我的 openModal 函数不会使用它来取消定义。

2 - 我尝试在 HTML 中 openModal.call(this) 但它没有给我更多结果(如答案中所示，但我想我错了)

我可以做什么来解决这个问题？谢谢

Answer 1

这与严格模式无关。函数声明的作用域与 var 相同。变量。

您已定义openModal在 IIFE 内。变量openModal范围仅限于该 IIFE。它不是全局的。

<小时/>

如果你想使其成为全局的，那么你需要明确地这样做。

不要这样做。全局变量存在命名空间冲突的风险。

window.openModal = openModal;

<小时/>

自 90 年代末以来，我们已经有了 addEventListener ，因此您无需将其表示为全局变量即可将其用作事件处理程序。

(function () {
    "use strict";
    addEventListener("DOMContentLoaded", function () {
        var thumbs = document.querySelectorAll(".netreviews_image_thumb");
        thumbs.forEach(function (element) {
            element.addEventListener("click", openModal);
        });
    });
    function openModal(event) {
        var identifier = this;
    }
}());

<小时/>

旁白:

href="javascript:"

如果您不想链接到任何地方，那么就不要使用链接。使用<button type="button">反而。更好的是，链接到有用的地方并有服务器端后备。