JavaScript嵌套回调API问题：调用内部函数提示未定义

问题核心是JavaScript的作用域规则：msg是main函数内部的局部函数，你传入的回调函数的作用域链不包含main的内部作用域，因此直接调用msg会找不到这个函数。以下是几种修复方法：

方案1：将msg作为参数传递给回调函数（推荐） #

这是最清晰、无副作用的做法，直接把需要用到的msg函数作为参数传给回调，明确依赖关系：

<html>
    <script>
        function main ( CB ) {
            function msg ( s ) {
                window.alert(s);
            }
            // 调用回调时传入msg函数
            CB(msg);
      }
    </script>
    <script>
        // 回调函数接收msg参数并调用
        main( function (msg) {
           msg("Hello universe");
            } );
    </script>
</html>

方案2：将msg挂载为main的属性 #

如果需要把msg作为main对外暴露的API之一，可以将它定义为main函数对象的属性：

<html>
    <script>
        function main ( CB ) {
            // 将msg挂载到main函数上
            main.msg = function ( s ) {
                window.alert(s);
            };
            CB();
      }
    </script>
    <script>
        main( function () {
           main.msg("Hello universe");
            } );
    </script>
</html>

注意：如果main会被多次调用，每次调用都会覆盖main.msg，适合单次调用的场景。

方案3：通过上下文绑定让回调访问msg #

可以将msg挂载到执行上下文，再通过call/apply让回调在main的上下文里执行：

<html>
    <script>
        function main ( CB ) {
            function msg ( s ) {
                window.alert(s);
            }
            // 将msg挂载到当前上下文
            this.msg = msg;
            // 让回调在main的上下文环境中执行
            CB.call(this);
      }
    </script>
    <script>
        main( function () {
           this.msg("Hello universe");
            } );
    </script>
</html>

这种方式需要注意上下文的指向，不如方案1直观。

内容的提问来源于stack exchange，提问作者John-L_.