9

Eu estava procurando por uma função em javascript equivalente à função dir do Python. Em Python, se quero ver todos os métodos associados a determinado objeto, basta passar a função dir diretamente ao constructor do objeto ou a uma instância do objeto. Assim, para ver métodos associados a strings, por exemplo, faço:

print(dir(str))

Ou:

print(dir("stack"))

Em JavaScript, eu descobri o método getOwnPropertyNames. Contudo, quando usei esse método tive acesso ao que parece ser apenas uma parcela dos métodos do objeto em questão. Exemplo:

console.log(Object.getOwnPropertyNames(Array))

Retorna:

[ 'length', 'name', 'prototype', 'isArray', 'from', 'of' ]

Ocorre que Arrays em Javascript também tem o método sort():

var names = ['Jesse', 'Walter', 'Hank']
console.log(names.sort())

Que resulta:

[ 'Hank', 'Jesse', 'Walter' ]

Porque o sort não apareceu na lista de métodos de Array quando utilizei Object.getOwnPropertyNames? Existe uma função em JavaScript equivalente ao dir do Python que retorna a lista completa de métodos de um objeto?

1 Resposta 1

8

Isso acontece porque, na verdade, métodos como o sort não pertencem ao construtor Array, mas sim ao Array.prototype.

Note, na saída do código que você rodou, que o Array possui uma propriedade chamada prototype. É nela que estão todos os métodos e propriedades que poderão ser acessados em qualquer instância de Array.

Então, para listar todos os métodos das instâncias de um Array, faça:

console.log(Object.getOwnPropertyNames(Array.prototype));

No JavaScript, quando você instancia um objeto a partir de um construtor, o objeto <constructor>.prototype será associado ao protótipo do objeto construído. Isso é explicado em mais detalhes em Como funciona a cadeia de protótipos em JavaScript?. A questão da nomenclatura é explicada em mais detalhes aqui.

Pense nas propriedades de Array como "métodos estáticos" e nas propriedades de Array.prototype como "métodos de instância".

Vale notar que a sintaxe de array literal é, basicamente, açúcar sintático para new Array(). Portanto, os dois jeitos de se criar um array abaixo são equivalentes:

const arr1 = new Array();
const arr2 = [];

Note que você não pode utilizar a função Object.getOwnPropertyNames diretamente em uma instância para tentar acessar seus métodos "herdados", já que, como o próprio nome da função diz, somente as "own properties", isto é, as propriedades definidas no próprio objeto serão retornadas. Como propriedades como sort e forEach não foram definidas diretamente em cada instância, mas sim em seu protótipo, você não terá acesso a elas.

Você pode utilizar a função Reflect.getPrototypeOf para acessar o protótipo de qualquer objeto, que, teoricamente, não pode ser acessado "diretamente":

console.log(
  // Retorna as propriedades do protótipo de `[]` (uma instância de `Array`)
  Object.getOwnPropertyNames(
    // Acessa o protótipo do 1º argumento. No caso, `[]`.
    Reflect.getPrototypeOf([])
  )
);

Utilizei o termo "teoricamente" acima porque, pela especificação, o protótipo de um objeto é uma "propriedade interna da linguagem". No entanto, existem meios para o acessar, tais como a propriedade __proto__ e as funções Object.getPrototypeOf e Reflect.getPrototypeOf.

Quando você dá um console.dir em algum objeto (como uma instância de Array[]), a propriedade __proto__ que aparece lá é uma referência ao protótipo do objeto. É esse protótipo (que não é "acessível" diretamente, conforme já vimos acima) que contém os métodos (como sort ou forEach) que você usa.

É um pouco confuso. Não deixe de compreender o que é protótipo em JavaScript (algo essencial para entender esta resposta). Esta outra resposta também é excelente. Além disso, não deixe de saber como a nomenclatura funciona para não escrever errado (Array.prototype.forEach é diferente de Array.forEach).


Se você realmente quiser listar todas as propriedades (incluindo não enumeráveis, símbolos e "herdadas" via herança prototípica), pode fazer sua própria função dir. Assim:

function dir(obj) {
  const allKeys = new Set();
  let currProto = Object(obj);

  while (currProto) {
    for (const key of Reflect.ownKeys(currProto)) {
      allKeys.add(key);
    }

    currProto = Reflect.getPrototypeOf(currProto);
  }

  // Retorna em formato de array por conveniência.
  return [...allKeys];
}

O código basicamente percorre toda a cadeia de protótipos do valor fornecido, inserindo no set todas as propriedades que ele encontrar. Utilizei o Set porque ele evita elementos duplicados (o que pode ocorrer).

Havendo propriedades duplicadas, a mais "próxima" será retornada — esse comportamento se deve ao modelo prototípico do JavaScript. Saiba mais sobre o Reflect.ownKeys.

Exemplo de uso:

function dir(obj) {
  const allKeys = new Set();
  let currProto = Object(obj);

  while (currProto) {
    for (const key of Reflect.ownKeys(currProto)) {
      allKeys.add(key);
    }

    currProto = Reflect.getPrototypeOf(currProto);
  }

  return [...allKeys];
}

const myArr = [1, 2, 3];
const allKeys = dir(myArr);

console.log(allKeys.includes('0')); //=> true; índice 0 (é uma propriedade, já que arrays nada mais são que objetos)
console.log(allKeys.includes('map')); //=> true; herdada via herança prototípica
console.log(allKeys.includes('from')); //=> false; é método "estático" de array. Logo, não existe na instância

console.log(allKeys);

Os null que apareceram no último console.log do exemplo acima são as propriedades com chave simbólica (tipo symbol). O console do snippet do Stack Overflow não sabe mostrar símbolos corretamente, o que justifica a impressão de null.

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 .