$(document).ready块内自定义函数失效问题求助

让我来帮你拆解下第一段代码失效的原因，以及对应的解决方法：

核心问题：函数赋值时的立即执行错误 #

你这段代码里最关键的bug出在这一行：

window.init = changeColor();

这里的()会立即执行changeColor函数，然后把它的返回值（因为changeColor没有写return语句，所以返回的是undefined）赋值给window.init。这就导致后续你如果想通过window.init()调用这个函数时，实际上是在尝试调用undefined，自然没法正常工作。

额外注意：内部函数的作用域问题 #

另外，你定义的navTo函数是在$(document).ready的回调函数内部，它的作用域仅限于这个回调函数内部，外部是无法直接访问到的。如果需要外部能调用navTo，也需要把它挂载到window对象上。

修正后的代码示例 #

$(document).ready(function () {
    // 若需外部调用navTo，将其挂载到window全局对象
    window.navTo = function(target) {
        if (target === 'into.html') {
            window.location.href = 'into.html';
        } else if (target === 'index.html') {
            window.location.href = 'index.html';
        }
    };

    // 去掉()，将函数本身赋值给window.init，而非执行后的结果
    window.init = changeColor;

    function changeColor() {
        document.getElementById("url").style.color = "#000000";
    }

    // 如果希望页面加载完成后立即执行changeColor，可直接在这里调用
    // changeColor();
});

关键修正点总结 #

• 把window.init = changeColor();改为window.init = changeColor，让window.init指向函数本身，而非函数执行后的返回值。
• 若需外部访问内部定义的函数，要将其挂载到window全局对象上。
• 如果需要页面就绪时自动执行changeColor，直接在回调内部调用changeColor();即可，无需依赖外部调用init。

内容的提问来源于stack exchange，提问作者Anna Klein