9

Estou precisando instanciar uma classe a partir de uma string.

Acontece que por alguma razão não funciona mais da forma que eu utilizava:

class MinhaClasse{
    meuMetodo(){
    alert('Método Funciona!');
  }
}

let nome_classe = 'MinhaClasse';
let nome_metodo = 'meuMetodo';

// var obj =  new MinhaClasse(); // instanciando diretamente funciona
var obj =  new window[nome_classe](); // instanciando por string não funciona
obj[nome_metodo]();

No Chrome (v75) está retornando o seguinte erro:

Uncaught TypeError: window[nome_classe] is not a constructor

class MinhaClasse{
	meuMetodo(){
  	alert('Método Funciona!');
  }
}

let nome_classe = 'MinhaClasse';
let nome_metodo = 'meuMetodo';

// var obj =  new MinhaClasse(); // instanciando diretamente funciona
var obj =  new window[nome_classe](); // instanciando por string não funciona
obj[nome_metodo]();

Também fiz um JSFIDDLE

OBS: Observar a aplicação em navegadores atuais (Ex: Chrome v75 ou superior), pois as soluções dadas em outras respostas aqui são similares ao método que eu utilizava (descrito acima) e não funcionam nos browsers atuais.

1
  • A resposta resolveu o que estava em dúvida? Precisa que algo mais seja melhorado? Acha que é possível aceitá-la agora?
    – Maniero
    25/01/2020 às 10:28

1 Resposta 1

5

De fato vi isto acontecer. Isto funcionava e não funciona mais. Não sei dizer ainda se realmente funcionava sem ser oficial ou se quebraram compatibilidade irresponsavelmente. Não é só no Chrome que mudou. Admito que a solução poderia estar sendo usada por uma falha e não por ser documentando.

Solução emergencial bem gambiarra para resolver, mas resolve mesmo e não é tão absurdo considerando que o código está no lado do cliente na maioria parte dos casos (em Node eu teria mais medo se o valor da variável usada com o nome vier de fonte externa direta ou indiretamente).

class MinhaClasse{
    meuMetodo() {
        alert('Método Funciona!');
    }
}

let nome_classe = 'MinhaClasse';
let nome_metodo = 'meuMetodo';

var obj = eval("new " + nome_classe + "()");
obj[nome_metodo]();

Coloquei no GitHub para referência futura.

O problema é o acesso ao objeto window que não tem mais acesso a todos os objetos globais como tinha antes. Mas não acontece em toda situação:

function sayHello() {
    console.log('Hello');
}

window["sayHello"]();
this["sayHello"]();
self["sayHello"]();
//top["sayHello"](); //tem problemas de permissão
globalThis["sayHello"]();

Coloquei no GitHub para referência futura.

Então depende do contexto.

Pra falar a verdade eu não sei bem como o JS trata o construtor, este caso que está tentando fazer eu não sei se funcionou um dia porque está tentando chamar o construtor como um método normal.

Eu tentaria pelo menos sanitizar um pouco antes de usar o conteúdo. Isto torna o código muito dinâmico.

A solução ideal é não precisar disto, em muitos cenários dá para fazer sem que o nome venha de uma string. Os outros talvez deveria repensar se precisa disto, quase nunca precisa e é só uma tentativa preguiçosa de solução que normalmente troca robustez e performance por menos digitação e tempo de criação.

Eu ainda estou tentando achar uma solução melhor. Achei algumas que apenas escondem o eval(). Achei pelo menos uma que é complicada demais para usar assim. E quero achar uma resposta porque parou de funcionar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .