为什么我的函数在严格模式(函数形式)中没有定义？

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函数不会因为这个而变得没有定义。

我试着用openModal.call(这个)在HTML中，但是它并没有给我更多的结果(如答案所示，但我想我弄错了)。

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

Answer 1

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

你已经在生活中定义了openModal。变量openModal的作用域是该生命。它不是全球性的。

如果您想使它成为全局的，那么您需要显式地这样做。

，，不要这么做。全局风险名称空间冲突。

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">代替。更好的做法是，链接一些有用的地方，并有一个服务器端回退。