metodos - recorrer array de objetos javascript

Cómo establecer dinámicamente un nombre de función/objeto en Javascript tal como se muestra en Chrome

Question

Esto es algo que me ha estado molestando con el depurador de Google Chrome y me preguntaba si habría alguna forma de solucionarlo.

Estoy trabajando en una gran aplicación de Javascript, usando muchos JS orientados a objetos (usando el framework Joose ), y cuando depuro mi código, todas mis clases reciben un valor de visualización inicial no sensitivo. Para ver lo que quiero decir, prueba esto en la consola de Chrome:

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

console.log(myObj);

La salida debe ser una sola línea que puedes expandir para ver todas las propiedades de myObj , pero lo primero que ves es solo ▶ F

Mi problema es que debido a mi marco OO, cada objeto instanciado recibe el mismo ''nombre'' . El código que se ve responsable de esto es así:

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

Lo que significa que en el depurador, la vista inicial siempre es ▶ f .

Ahora, realmente no quiero cambiar nada acerca de cómo Joose instancia objetos (getMutableCopy ...?) , Pero si hubiera algo que pudiera agregar a esto para poder proporcionar mi propio nombre, sería genial.

Algunas cosas que he visto, pero que no he podido conseguir con:

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

Answer 1

Creo que esta es la mejor manera de establecer dinámicamente el nombre de una función:

   Function.prototype.setName = function (newName) {
       Object.defineProperty(this,''name'', {
          get : function () { 
              return newName; 
          }
       });
    }

Ahora solo necesita llamar al método setName

function foo () { }
foo.name; // returns ''foo''

foo.setName(''bar'');
foo.name; // returns ''bar''

foo.name = ''something else'';
foo.name; // returns ''bar''

foo.setName({bar : 123});
foo.name; // returns {bar : 123}

Answer 2

normalmente usas window[name] como

var name ="bar"; 
window["foo"+name] = "bam!"; 
foobar; // "bam!"

que te llevaría a una función como:

function getmc (object, name) { 

    window[name] = function () {}; 
    window[name].prototype = object; 
    return new window[name](); 

}

pero entonces

foo = function(){}; 
foobar = getmc(foo, "bar"); 
foobar; // ▶ window
foobar.name; // foo
x = new bar; x.name; // foo .. not even nija''ing the parameter works

y dado que no puede evaluar una declaración de devolución ( eval("return new name()"); ), creo que está atrapado

Answer 3

Esto no resolverá totalmente su problema, pero sugeriría anular el método toString en el prototipo de la clase. Por ejemplo:

my_class = function () {}
my_class.prototype.toString = function () { return ''Name of Class''; }

Todavía verá el nombre de clase original si ingresa una instancia de my_class directamente en la consola (no creo que sea posible hacer algo al respecto), pero obtendrá el buen nombre en los mensajes de error, que encuentro muy útil. Por ejemplo:

a = new my_class()
a.does_not_exist()

Aparecerá el mensaje de error: "TypeError: el nombre del objeto de clase no tiene el método ''does_not_exist''"

Answer 4

He estado jugando con esto durante las últimas 3 horas y finalmente lo he conseguido al menos un poco elegante usando la nueva función como se sugiere en otros hilos:

/**
 * 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'');

Si ejecuta el código anterior, debería ver el siguiente resultado en su consola:

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

Answer 5

Aunque es feo, puedes hacer trampa a través de eval ():

function copy(parent, name){
  name = typeof name===''undefined''?''Foobar'':name;
  var f = eval(''function ''+name+''(){};''+name);
  f.prototype = parent;
  return new f();
}

var parent = {a:50};
var child = copy(parent, ''MyName'');
console.log(child); // Shows ''MyName'' in Chrome console.

Cuidado: ¡solo puedes usar nombres que serían válidos como nombres de funciones!

Adición: Para evitar la eval en cada instanciación de objetos, use un caché:

function Cache(fallback){
  var cache = {};

  this.get = function(id){
    if (!cache.hasOwnProperty(id)){
      cache[id] = fallback.apply(null, Array.prototype.slice.call(arguments, 1));
    }
    return cache[id];
  }
}

var copy = (function(){
  var cache = new Cache(createPrototypedFunction);

  function createPrototypedFunction(parent, name){
    var f = eval(''function ''+name+''(){};''+name);
    f.prototype = parent;
    return f;
  }

  return function(parent, name){
    return new (cache.get(name, parent, typeof name===''undefined''?''Foobar'':name));
  };
})();

Answer 6

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

Hará el truco y es la solución más eficiente. No eval tampoco.

Answer 7

Similar a la respuesta @ Piercey4, pero también tuve que establecer el name para la instancia:

function generateConstructor(newName) {
  function F() {
    // This is important:
    this.name = newName;
  };

  Object.defineProperty(F, ''name'', {
    value: newName,
    writable: false
  });

  return F;
}

const MyFunc = generateConstructor(''MyFunc'');
const instance = new MyFunc();

console.log(MyFunc.name); // prints ''MyFunc''
console.log(instance.name); // prints ''MyFunc''