1

假设这是我唯一的HTML

<input id="target" type="number">

并假设这是我唯一的JavaScript

var target = document.getElementById('target');

我想function在输入更改时执行一次，但我也想function在页面加载时执行一次（Self-Executing Function或IIFE）。以下是 3 个示例，其中 1 个不起作用。

以下按预期工作：

target.addEventListener('input', myFunction);

function myFunction(){
    console.log('executed!');
}
myFunction();

这里function将在页面加载时执行。它不会由 执行eventListener，而是会登录ReferenceError: myFunction is not defined到控制台：

target.addEventListener('input', function(){
    myFunction();
});

(function myFunction(){
    console.log('executed!');
})();

这一个不会在页面加载时执行，也不会由eventListener并且将登录ReferenceError: myFunction is not defined到控制台：

target.addEventListener('input', myFunction);

(function myFunction(){
    console.log('executed!');
})();

我的问题：为什么第三个例子不起作用？

4

1 回答 1

3

IIFE 的重点是防止对全球（或更高）范围的污染。它不起作用，因为立即调用函数表达式 (IIFE) 是一个匿名函数。因此，当您使用名称设置 IIFE 语法时，函数名称会在表达式之外被忽略。

来自MDN：

IIFE（立即调用函数表达式）是一个 JavaScript 函数，一旦定义就会运行。

它是一种设计模式，也称为自执行匿名 函数，包含两个主要部分。第一个是包含在 Grouping Operator () 中的词法范围的匿名函数。这可以防止访问 IIFE 惯用语中的变量以及污染全局范围。

第二部分是创建立即执行的函数表达式 ()，JavaScript 引擎将通过它直接解释函数。

此外，出于同样的原因，您的第二个示例实际上不起作用。您确实看到了您的executed!消息，但那是因为 IIFE 会自行执行。如果您继续更改输入的值，您将得到与选项 #3 相同的错误。

var target = document.getElementById('target');

target.addEventListener('input', function(){
    myFunction();
});

(function myFunction(){
    console.log('executed!');
})();
<input id="target" type="number">

于 2018-04-18T14:37:34.227 回答