Question

我正在使用工厂模式来创建不同类型的类似对象，例如Car和Truck。

当我运行类似的东西时：

var newObj = new this.Vehicles[type] // type can be 'Car' or 'Truck'
console.log(newObj)
/// ...
var newCar = new ObjectFactory('Car', 'ford')
var newTruck = new ObjectFactory('Truck', 'cat')

一切正常，但我在console.log的控制台中看到了这一点：

O…y.V…s.Car {type: "Car"}
O…y.V…s.Truck {type: "Truck"}

完整对象应显示为ObjectFactory.Vehicles.Car和ObjectFactory.Vehicles.Truck。我可以将它们显示为全名而不是点缀和截断吗？

Answer 1

不同的浏览器控制台以不同的方式工作，但是那些显示不是内置类型（如Chrome）的类型名称通常会显示创建该控件的构造函数的名称（真实名称或推断）。宾语。那就是：

function Foo() {
}
console.log(new Foo);

给我们

Foo { }

...在Chrome上。

我会猜测（因为莫名其妙地，你似乎不愿意告诉我们）你有这样的事情：

var ObjectFactory = {
    Vehicles: {
        Car: function() {
        }
    }
};

在Chrome中，两者都是

console.log(new ObjectFactory.Vehicle.Car);

和

var c = ObjectFactory.Vehicle.Car;
console.log(new c);

......我得到同样的结果：

O…y.V…s.Car {}

Chrome正在推断该功能的名称（至少出于调试目的），但随后将该名称删除以进行显示。

据我所知，覆盖它的唯一方法是为Chrome提供一个真正的名称：

var ObjectFactory = {
    Vehicles: {
        Car: function ObjectFactory$Vehicles$Car() {
        // -----------^
        }
    }
};

现在，两者都是

console.log(new ObjectFactory.Vehicle.Car);

和

var c = ObjectFactory.Vehicle.Car;
console.log(new c);

......我得到了

ObjectFactory$Vehicles$Car {}

显然，Chrome很乐意忽略其推断名称，但不会忽略您为该功能提供的正确名称。

这不是你想要的名字，但它比O…y.V…s.Car更清晰。可悲的是，Firefox仍然说Object，但也许会随着时间而改变。

附注：从ES2015开始，函数的真实名称被确定的方式被扩展为涵盖更多的情况，例如调用此函数Foo，即使我们使用匿名函数表达式来创建它：

var Foo = function() {
};

这是由SetFunctionName规范操作以及它所调用的几十个地方定义的。但是，我不清楚，一旦浏览器完全符合规范，您就会想要结果，因为我认为您的函数名称只是Car，而不是{{1} }。

Chrome显示截断的对象原型名称

1 个答案: