为何console.log输出函数时返回函数体而非完整函数对象？console.log与console.dir的差异解析

Let’s break down your questions clearly—they touch on a common quirk of how browser developer tools handle function logging, so this is great to clarify!

1. Why does console.log(person1.enroll) show the function body instead of the full function object? #

When you pass a function to console.log(), most browser dev tools default to displaying the string representation of the function. This comes directly from the function’s built-in toString() method, which returns the source code of the function (or a standardized version for native functions). For your abc function, that string is exactly ƒ abc() {console.log("hello world")}.

The full function object (with properties like arguments, caller, prototype, and internal attributes like [[Scopes]]) does exist—but console.log prioritizes showing you the code you wrote first. This is a UX choice to help you quickly identify what the function does, rather than dumping all its internal properties upfront.

2. Why do I need console.dir(person1.enroll) to see all properties/methods of the function object? #

console.dir() is purpose-built to display the full hierarchical structure of any object, including functions (since functions are first-class objects in JavaScript). Unlike console.log, it doesn’t treat functions as a special case—instead, it expands the object to show every property, prototype chain entry, and internal attribute that makes up the function object.

Think of it this way: console.log is for quick "what does this do?" checks, while console.dir is for deep-diving into an object’s full anatomy.

3. Why can’t console.log(person1.enroll) show all internal methods/properties? #

This ties back to tooling design. Browser dev teams decided that for most debugging scenarios, seeing the function’s code is more immediately useful than seeing its internal properties. If console.log showed every function’s full object structure by default, the console would get cluttered really fast, especially when logging complex objects with multiple functions.

Bonus: Why does console.log output the function body instead of the function object? #

Functions in JavaScript are indeed objects, but they have a special toString() implementation that returns their source code. console.log leverages this to present a more readable output for developers. If you want to force console.log to show the function as an object, you can wrap it in an object literal—try console.log({ enroll: person1.enroll }) and you’ll see the full object view instead of the function body.

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