如果函数是对象，为什么我不能在 JS 中的另一个函数内部调用函数？

Question

我可以在对象内部调用函数，但我不能在函数内部调用函数。 它是如何工作的？

const baz = {
    bar() { console.log('hi');}
}

baz.bar(); // -> hi

function foo() {
    function bar() {
        console.log('there');
    }
}

console.log(foo.bar); // undefined, why???

Answer 1

因为在第二个示例中，foo 上没有 bar 属性，但 foo.bar 在 foo 对象上查找名为 bar 的属性。如果您的问题来自您的两个示例都使用 {}，那么：在 JavaScript 中，{} 至少用于几个不同的事情：

1. 分隔对象字面量，如您的第一个示例中所示
2. 分隔函数主体，如第二个示例或块（例如，附加到 if 或 for 或类似的块）

这些是完全不相关的东西，它们只是看起来有点相似。 （{} 还用于其他用途，例如指示命名导入 [import { x } from "y"]、对象解构 [虽然实际上这只是上面 #1 的反面]，可能还有其他......）

还请注意，使用您的代码，bar 函数仅在 if 和 当 您调用 foo 时创建，并创建不同的 bar 函数每次拨打foo。

您可以将一个函数分配给另一个函数的属性，但不是这样。例如：

function foo() {
    console.log("foo");
}
foo.bar = function() {
    console.log("bar");
};
foo.bar(); // "bar"
foo();     // "foo"

这行得通，因为正如您所说，函数是对象，因此您可以向它们添加属性。

如果你想要更相似的声明式语法，你可以用函数创建一个对象，并通过Object.assign将它们复制到目标函数：

// Object.assign copies properties from the second argument onward
// onto the object in the first argument
const foo = Object.assign(
    // Function expression, creates a function:
    function foo() {
        console.log("foo");
    },
    // Object literal, creates an object:
    {
        bar() {
            console.log("bar");
        }
    }
);
foo.bar(); // "bar"
foo();     // "foo"