构造函数属性：console.log与console.dir的显示差异及术语区分

这个问题问得很到位！本质上这两个控制台方法的核心差异在于它们对函数对象的默认展示策略完全不同，而且确实有明确的术语来区分这两种呈现方式。

先回顾一下你的示例代码，方便对照理解：

function myConstructor(){ this.sayHi = function(){ console.log("hey") } }
myConstructor.boop = "thing"

console.log(myConstructor) 
// 输出: ƒ myConstructor(){ this.sayHi = function(){ console.log("hey") } }

console.dir(myConstructor)
// 展开后可见完整结构:
// ƒ myConstructor()
// boop : "thing"
// arguments: null
// caller: null
// length: 0
// name: "myConstructor"
// prototype: {constructor: ƒ}
// __proto__: ƒ ()
// [[FunctionLocation]]: VM123:1
// [[Scopes]]: Scopes[1]

核心差异与术语区分 #

1. console.log()：函数的字符串表示/源码视图 #

当你用console.log()打印函数时，它默认会输出这个函数的字符串化结果——也就是调用函数自带的toString()方法返回的内容。对于我们自己定义的函数来说，这个结果就是函数的源码文本。

这就是为什么你看不到后来添加的boop属性：函数的toString()方法只会返回它的原始定义代码，不会包含后续附加到函数对象本身的属性。

2. console.dir()：对象的属性枚举视图/检查器视图 #

console.dir()的设计初衷就是以可展开的树状结构，完整展示对象的所有可枚举（甚至部分不可枚举）属性——而在JavaScript里，函数本身就是一种特殊的对象。

所以当你用console.dir()打印函数时，它会把函数当作普通对象来解析：既会展示你手动添加的自有属性（比如boop），也会展示函数特有的内置属性（比如length、name、prototype），还有原型链上的相关属性。

关键术语总结 #

• console.log()的输出：通常称为函数的字符串表示（String Representation）或源码视图（Source Code View）
• console.dir()的输出：称为对象的属性枚举视图（Property Enumeration View）或检查器视图（Inspector View）

小技巧补充 #

如果你想让console.log()也展示函数的属性结构，其实只要把函数包装在一个普通对象里就行：

console.log({ myConstructor })
// 这样输出会自动展开，显示包含boop属性的完整对象结构

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