如何在不返回内部函数beta的情况下访问函数alpha中的beta？

问题场景 #

我定义了一个函数alpha，其内部包含另一个函数beta。若不在alpha中返回beta，该如何访问beta？例如在全局上下文中可通过window.alpha()访问alpha，能否通过window DOM树将beta作为属性进行访问？

示例代码：

<html>
<head></head>
<body>
<script>
function alpha() {
    console.log("hi");
    function beta() {
        console.log("hello");
    }
}
alpha();
</script>
</body>
</html>

解决方案 #

好问题！首先得明确：默认情况下beta是alpha的局部作用域成员，外部（包括全局window对象）无法直接访问它，这是JavaScript作用域隔离规则导致的。另外你提到的“通过window DOM树访问”是行不通的——beta是函数作用域内的变量，和DOM元素、DOM树没有任何关联，window作为全局对象，只有主动挂载的属性才能被外部访问到。

下面是几种不用返回beta就能在外部访问它的实用方法：

1. 将beta挂载到alpha函数对象本身

函数在JavaScript里也是对象，你可以直接给alpha添加属性，把beta赋值给这个属性：

<html>
<head></head>
<body>
<script>
function alpha() {
    console.log("hi");
    function beta() {
        console.log("hello");
    }
    // 把beta挂载到alpha函数对象上
    alpha.beta = beta;
}
alpha();
// 全局上下文直接通过alpha的属性访问beta
alpha.beta(); // 输出 "hello"
</script>
</body>
</html>

这种方法不会污染全局命名空间，还能清晰体现beta和alpha的从属关系，是比较推荐的方式。

2. 将beta挂载到全局window对象上

如果你不在意全局命名空间污染，可以直接在alpha内部把beta赋值给window的属性：

<html>
<head></head>
<body>
<script>
function alpha() {
    console.log("hi");
    function beta() {
        console.log("hello");
    }
    // 把beta挂载到全局window对象
    window.beta = beta;
}
alpha();
// 全局上下文直接调用beta
beta(); // 输出 "hello"
</script>
</body>
</html>

⚠️ 注意：这种方法会在全局添加一个beta变量，如果其他代码也定义了同名变量，很容易引发冲突，所以除非必要不建议使用。

3. 通过闭包暴露访问入口（进阶）

如果不想直接挂载属性，也可以在alpha内部定义一个专门获取beta的方法，同样挂载到alpha上：

<html>
<head></head>
<body>
<script>
function alpha() {
    console.log("hi");
    function beta() {
        console.log("hello");
    }
    // 暴露获取beta的方法
    alpha.getBeta = function() {
        return beta;
    }
}
alpha();
// 先获取beta再调用
const betaFunc = alpha.getBeta();
betaFunc(); // 输出 "hello"
</script>
</body>
</html>

这种方式更灵活，比如可以添加一些访问控制逻辑，限制beta的调用时机或权限。

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