调用ColorSwitcher函数提示未定义，如何将其改造为回调函数？

• 你定义ColorSwitcher的方式是命名函数表达式，作为jQuery(document).ready()的入参传入，这种写法的函数名作用域仅局限于函数体内部，全局作用域下无法访问到该函数，因此点击事件中调用ColorSwitcher()时会抛出未定义的报错。
• 全局作用域下没有挂载ColorSwitcher方法，自然无法跨作用域调用。

如果需要将ColorSwitcher作为可复用的回调函数，提前在公共作用域定义该函数即可，修改后的代码如下：

var BackgroundColor = "red";
// 在公共作用域定义可复用的ColorSwitcher函数
function ColorSwitcher ($) {
    //通过变量为部分类添加对应颜色样式
}

// 页面加载完成后首次执行
jQuery(document).ready(ColorSwitcher);

jQuery(document).ready(function($) {
    $("ul.colors .color2").click(function () {
        BackgroundColor = "pink"; // 修改颜色
        ColorSwitcher($); // 调用时传入jQuery实例避免$符号冲突
        return false;
    })
});

• 如果担心全局变量污染，可以将所有代码包裹在自执行匿名函数形成的闭包内，ColorSwitcher仅在闭包作用域内可访问即可，不需要暴露到全局。
• 如果不需要单独复用逻辑，也可以将颜色更新的逻辑抽成独立方法，不需要绑定到ready的回调上。

内容的提问来源于stack exchange，提问作者attack-to-overflow