为什么Socket.io场景下嵌套函数内的callback回调函数无法正常执行？

问题根因 #

报错和你猜测的作用域问题无关：你在client.on中用的是箭头函数，上层作用域直接指向loadData函数的作用域，完全可以正常拿到入参的callback。
真正的问题是你调用loadData时传入的参数不是函数类型：你在mounted钩子中传入的是this.client，这个属性是你在组件data中定义的变量，初始值大概率是undefined、null或者空对象，不属于函数类型，执行callback(client)时自然会抛出类型错误。

修复方案 #

调整mounted中的调用逻辑，给loadData传入函数类型的回调参数即可：

mounted() {
    // 传入回调函数，参数为连接成功后返回的client实例
    this.loadData((client) => {
        // 此处编写连接成功后的后续逻辑
        console.log('SyncClient连接完成', client)
    })
}

优化建议 #

可以给loadData加一层参数类型校验，避免漏传回调或者传错类型时抛出报错：

loadData(callback) {
    var client = new SyncClient(this.socket, this.project);
    this.client = client; // 来自data函数定义的属性

    client.on("connected", () => {
        this.values = client.getData();
        // 仅当callback为函数类型时执行
        if (typeof callback === 'function') {
            callback(client);
        }
    })
}

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