javascript - 我无法在html的js文件中调用函数

我有一个带有标签的文件index.php

<a onclick="listenFilter()" ></a>

和名为test.js的JavaScript链接到我的index.php，其功能名称为listenFilter（）

$(document).ready(function () {
function listenFilter() {
    alert('a');
    return false;
}
});

它失败了，我的浏览器说


  ReferenceError：未定义listenFilter


但是当我将脚本更改为

function listenFilter() {
        alert('a');
        return false;
    }

有用。

这两种情况有什么不同？

最佳答案

这不是因为函数是在文档加载后定义的。这是因为定义了范围。JavaScript中的脚本标签会自动将在脚本标签的直接范围中定义的所有变量和函数绑定为全局变量（浏览器中window对象的属性）。

这是因为$(document).ready调用内的函数的作用域在全局作用域中是无法访问的，只有该作用域中的其他函数才可以访问。如果将其更改为：

$(document).ready(function () {
window.listenFilter = function listenFilter() {
    alert('a');
    return false;
}
});

这将起作用，因为您将其添加到了全局范围。

$(document).ready(function(){ })与在此问题中执行(function(){ })()相同。是范围的问题，而不是声明顺序的问题。该声明被包装在一个封闭的容器中，以防止其影响全局范围。