如何在Javascript中动态设置函数/对象名称(在Chrome中显示)

Question

这是一直困扰我的谷歌Chrome调试器，我想知道是否有办法解决它。

我正在开发一个大型Javascript应用程序，使用了大量面向对象的JS (使用乔斯框架)，当我调试代码时，我的所有类都会得到一个荒谬的初始显示值。为了理解我的意思，在Chrome控制台上试试这个：

var F = function () {};
var myObj = new F();

console.log(myObj);

输出应该是一行，您可以展开它来查看myObj的所有属性，但是您看到的第一件事就是▶ F。

我的问题是，由于我的OO框架，每个实例化的对象都具有相同的“名称”。它看起来负责的代码如下所示：

getMutableCopy : function (object) {
    var f = function () {};
    f.prototype = object;
    return new f();
}

这意味着在调试器中，初始视图总是▶ f。

现在，我真的不想改变关于Joose实例化对象(getMutableCopy.？)的任何东西，但是如果有什么东西我可以添加到其中，以便我可以提供我自己的名字，那就太好了。

有些东西我看过了，但什么都做不出来：

> function foo {}
> foo.name
  "foo"
> foo.name = "bar"
  "bar"
> foo.name
  "foo"    // <-- looks like it is read only

Answer 1

Object.defineProperty(fn, "name", { value: "New Name" });

也是最具表现力的解决方案。也没有艾娃。

Answer 2

在过去的3个小时里，我一直在玩这个游戏，最后使用其他线程上建议的新函数，终于得到了一些优雅的效果：

/**
 * JavaScript Rename Function
 * @author Nate Ferrero
 * @license Public Domain
 * @date Apr 5th, 2014
 */
var renameFunction = function (name, fn) {
    return (new Function("return function (call) { return function " + name +
        " () { return call(this, arguments) }; };")())(Function.apply.bind(fn));
};   

/**
 * Test Code
 */
var cls = renameFunction('Book', function (title) {
    this.title = title;
});

new cls('One Flew to Kill a Mockingbird');

如果运行上述代码，您将看到控制台的以下输出：

Book {title: "One Flew to Kill a Mockingbird"}

Answer 3

结合使用计算属性名称动态命名属性，并结合使用推断函数命名给出计算属性名称的匿名函数：

const name = "aDynamicName"
const tmp  = {
  [name]: function(){
     return 42
  }
}
const myFunction= tmp[name]
console.log(myFunction) //=> [Function: aDynamicName]
console.log(myFunction.name) //=> 'aDynamicName'

你可以在这里用他们想要的任何名字来创建一个函数，用他们想要的任何名字。

如果这一点还不清楚，那么让我们将此技术的两部分分开分析：

计算属性名

const name = "myProperty"
const o = {
  [name]:  42
}
console.log(o) //=> { myProperty: 42 }

通过计算属性命名，我们可以看到在o上分配的属性名是myProperty。这里的[]使JS查找括号内的值，并将其用于属性名称。

推断函数命名

const o = {
  myFunction: function(){ return 42 }
}
console.log(o.myFunction) //=> [Function: myFunction]
console.log(o.myFunction.name) //=> 'myFunction'

这里我们使用推断函数命名。该语言查看函数被赋值的位置的名称&给出推断出的名称。

我们可以将这两种技术结合起来，如开头所示。我们创建一个匿名函数，它通过推断函数命名获得它的名称，它来自计算的属性名，这是我们想要创建的动态名称。然后，我们必须从嵌入在其内部的对象中提取新创建的函数。

使用堆栈跟踪的示例

命名提供的匿名函数

​

// Check the error stack trace to see the given name

function runAnonFnWithName(newName, fn) {
  const hack = { [newName]: fn };
  hack[newName]();
}

runAnonFnWithName("MyNewFunctionName", () => {
  throw new Error("Fire!");
});

​