为什么我的函数在严格模式（函数形式）下未定义？

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 变量的作用域相同。

您在 IIFE 中定义了openModal。变量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">。更好的是，链接到有用的地方并有一个服务器端后备。