前端JavaScript基础训练系列七十四：Foo 的函数构造

我们来简单介绍一个容易让开发者感到迷惑的细节。通常来说，JavaScript 规范并不会控 制浏览器中开发者工具对于特定值或者结构的表示方式，浏览器和引擎可以自己选择合适 的方式来进行解析，因此浏览器和工具的解析结果并不一定相同。比如，下面这段代码的 结果只能在 Chrome 的开发者工具中才能看到。
这段传统的“类构造函数”JavaScript 代码在 Chrome 开发者工具的控制台中结果如下所示: function Foo() {}

var a1 = new Foo(); a1; // Foo {}

我们看代码的最后一行:表达式 a1 的输出是 Foo {}。如果你在 Firefox 中运行同样的代码 会得到 Object {}。为什么会这样呢?这些输出是什么意思呢?
Chrome 实际上想说的是“{} 是一个空对象，由名为 Foo 的函数构造”。Firefox 想说的是“{} 是一个空对象，由 Object 构造”。之所以有这种细微的差别，是因为 Chrome 会动态跟踪并把 实际执行构造过程的函数名当作一个内置属性，但是其他浏览器并不会跟踪这些额外的信息。
看起来可以用 JavaScript 的机制来解释 Chrome 的跟踪原理: function Foo() {}

var a1 = new Foo(); a1.constructor; // Foo(){}
a1.constructor.name; // "Foo"

Chrome 是不是直接输出了对象的 .constructor.name 呢?令人迷惑的是，答案是“既是又
不是”。 思考下面的代码:

function Foo() {}
var a1 = new Foo();
Foo.prototype.constructor = function Gotcha(){};
a1.constructor; // Gotcha(){} a1.constructor.name; // "Gotcha"
a1; // Foo {}

即使我们把 a1.constructor.name 修改为另一个合理的值(Gotcha)，Chrome 控制台仍然会
输出 Foo。
看起来之前那个问题(是否使用 .constructor.name ?)的答案是“不是”;Chrome 在内
部肯定是通过另一种方式进行跟踪。
别着急!我们先看看下面这段代码:

var Foo = {};
var a1 = Object.create( Foo ); a1; // Object {}
Object.defineProperty( Foo, "constructor", { enumerable: false,
value: function Gotcha(){}
});
a1; // Gotcha {}

啊哈!抓到你了(Gotcha 的意思就是抓到你了)!本例中 Chrome 的控制台确实使用 了 .constructor.name。实际上，在编写本书时，这个行为被认定是 Chrome 的一个 bug， 当你读到此书时，它可能已经被修复了。所以你看到的可能是 a1; // Object {}。
除了这个 bug，Chrome 内部跟踪(只用于调试输出)“构造函数名称”的方法是 Chrome 自身的一种扩展行为，并不包含在 JavaScript 的规范中。
如果你并不是使用“构造函数”来生成对象，比如使用本章介绍的对象关联风格来编写代 码，那 Chrome 就无法跟踪对象内部的“构造函数名称”，这样的对象输出是 Object {}， 意思是“Object() 构造出的对象”。
当然，这并不是对象关联风格代码的缺点。当你使用对象关联风格来编写代码并使用行 为委托设计模式时，并不需要关注是谁“构造了”对象(就是使用 new 调用的那个函数)。 只有使用类风格来编写代码时 Chrome 内部的“构造函数名称”跟踪才有意义，使用对象 关联时这个功能不起任何作用。