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

Posted 2023-02-22

【中文标题】为啥我的函数在严格模式（函数形式）下未定义？

【英文标题】：Why does my function get undefined in strict mode (function form)?为什么我的函数在严格模式（函数形式）下未定义？

【发布时间】：2018-08-17 20:42:08

【问题描述】：

基本上我的页面中有一张图片，我可以点击它以模式打开它。我之前使用的是“严格模式”（简单形式），但由于我尝试符合 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) 但它并没有给我更多的结果（如答案所示，但我想我弄错了）

我能做些什么来解决这个问题？谢谢

【问题讨论】：

你想用this 指代什么？

@TomNijs 我尝试引用已单击的对象

【参考方案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">。更好的是，链接到有用的地方并有一个服务器端后备。

【讨论】：

哦，好的，我明白这一点，但我能做些什么来使其全球化并仍然保持严格模式 IIFE？或者至少使其范围可用......对于滥用术语感到抱歉

哦，好的，谢谢，实际上我没有编写 HTML 部分，但是是的，它看起来很合乎逻辑。虽然我不能编辑那个 HTML，或者至少我需要和我的上级谈谈。在这种情况下，服务器回退是什么意思？我不清楚...

实际上现在我的 closeModal 函数也未定义......我想我必须为它做同样的事情吗？另外，现在我需要从每个 标签中删除 onclick 吗？因为它仍然弹出我一个错误（只是想确保在这里）

我觉得这很麻烦，是我在这里遗漏了什么，还是在使用严格模式时我总是需要那样做？

这很麻烦，但这是使用onclick 属性的问题之一，也是二十年前它们过时的原因。