Question

假设这是我唯一的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!');
})();

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

Answer 1

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

来自 MDN ：

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

这是一种设计模式，也称为自执行匿名   功能包含两大部分。 首先是匿名   具有包含在分组运算符（）中的词法范围的函数。   这可以防止访问IIFE习语中的变量以及   污染全球范围。

第二部分是创建立即执行的功能   expression（），JavaScript引擎将直接通过它   解释这个功能。

另外，你的第二个例子实际上并没有出于同样的原因。您确实看到了executed!消息，但这是因为IIFE会自行执行。如果您继续更改输入的值，您将得到与选项＃3相同的错误。

＆＃13;

var target = document.getElementById('target');

target.addEventListener('input', function(){
    myFunction();
});

(function myFunction(){
    console.log('executed!');
})();

＆＃13;

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

＆＃13;

从事件监听器调用自执行函数

1 个答案: