Chrome调试器中显示的“类名”基于什么?能控制吗?

What is the "class name" shown in Chrome's debugger based on? Can it be controlled?

本文关键字：什么 于什么 控制 显示 调试器 类名 Chrome      更新时间：2023-09-26

Chrome调试器中显示的"类名"是如何确定的？它们基于什么？

例如，对于function Foo() {}，"类名"相当明显：

> function Foo() {}
> new Foo()
Foo {} // shows the "class name" Foo

这似乎由 .name 属性控制，但事实并非如此：

> Foo.name = "NotFoo"
> new Foo()
Foo {} // shows "Foo", not "NotFoo"

但有时这可能非常令人惊讶：

> function subclass(base, methods) {
  var initializer = methods.__init__;
  initializer.prototype = $.extend(initializer.prototype, base.prototype, methods);
  return initializer;
}
> Bar = subclass(Object, { __init__: function() {} });
> new Bar()
subclass.__init__ {__init__: function} // Shows "subclass.__init__"… ?!

这个"类名"是如何确定的？

而且，进一步，是否可以控制或修改？

这似乎是Chrome特有的，因为Firefox似乎没有尝试猜测第二个示例中的"类名"。

谷歌浏览器的官方网站对此没有帮助，但我指出你这个 SO：

如何在 Chrome Dev Tools 中为自定义类计算 JavaScript 类名称？

我认为你不能覆盖chrome控制台的"推断"机制。

一些控制台播放：

>>function Foo(){}
>>function NotFoo(){}
>>var a = new Foo();
>>a.constructor = NotFoo;
>>a
Foo {constructor: function}
constructor: function NotFoo(){}
__proto__: Foo
>> a instanceof Foo
true
>> a.__proto__.constructor.name
"Foo"
>> a.__proto__.constructor.name = "NotFoo"
"NotFoo"
>> a
Foo {constructor: function}
>> a instanceof Foo
true

如果 chrome 开发人员想让它完全不可覆盖，你可以看到他们如何根据 webkit 的instanceof实现进行检查......

和：如何在Javascript中检查实例的类？

这个"类名"是如何确定的？

请参阅 github 上的 Chromium 源代码。

  • 控制台目录-ES6 测试用例
  • 预期输出（2022 年更新：我无法在 HEAD 中找到此文件的最新版本 - 但您可以使用它来确定是否可以根据需要调整调试器输出）

您也许可以回溯第一页（可能必须通过 C 代码）。

而且，进一步，是否可以控制或修改？

您可以使用 .toString 解析类的源代码，执行 .replace 以更改名称，并评估修改后的源代码。现在，您有一个将在控制台检查器中正确显示的类克隆。

如果您无法控制此类（它是第三方类），显然不要这样做，因为第三方代码可能引用了该类。此外，它还创建了一个重复的类;这会令人困惑。

但是，如果你正在做一个元编程恐怖节目（而不是例如为了工作或任何可能看到曙光的东西......），请继续使用它。这是我个人尝试过的方法，直到出现一些更好的API。=''

我不记得这样做是否对性能有影响

Javascript 中的函数可以有名称，当你像这样定义它时：

function myfunc(){}

这与您执行的操作相同：

var myfunc = function myfunc(){}

在这个函数中，myfunc是你的函数的名称，这不是唯一的，这意味着你可以使用相同的名称创建不同的函数，当然你最好不要这样做。 当你定义你的函数时，比如：

var myfunc = function(){}
您

创建了一个没有任何名称的函数，这将是一个匿名函数，浏览器分析器不会向您显示函数的名称或您提到的class。

相关文章：