5

O JavaScript possui diversos objetos com métodos, como é o caso de arrays que têm, por exemplo, o método forEach.

Mas eventualmente um mesmo nome pode ser utilizado por outros objetos, como método forEach do NodeList. Em casos como esse, a distinção é necessária para que se especifique o construtor (Array e NodeList, por exemplo) em alguma parte do "nome completo".

Então, do ponto de vista semântico da linguagem, qual a forma correta para se utilizar esse "nome completo"?

  • Array.prototype.forEach?
  • Array.forEach?

Se forem diferentes, há uma situação correta para utilizar cada uma dessas situações? Ou os dois são "equivalentes" e se referem à mesma coisa?

2 Respostas 2

2

Nesta resposta, usarei os exemplos Array.prototype.forEach e Array.from (não usei Array.forEach porque este não existe). No entanto, o mesmo vale para qualquer outra função construtora (além de Array) ou outra propriedade (além de forEach).


TL; DR

  • <constructor>.prototype.<method> deve ser utilizado para fazer referência aos "métodos de instância". Por exemplo, Array.prototype.forEach.

  • <constructor>.<method> deve ser utilizado para fazer referência aos "métodos estáticos". Por exemplo, Array.from.

São diferentes.


Em JavaScript, toda função possui uma propriedade chamada prototype, que é sempre um objeto (ou null). No caso da função Array, a propriedade prototype é um objeto que contém diversas propriedades e métodos, como map, filter, reduce, etc. Parece familiar, certo?

Quando uma função pode ser invocada utilizando o operador new, ela também pode ser chamada de função construtora. Assim, quando um novo objeto é criado a partir de uma função construtora, a propriedade interna [[Prototype]] desse novo objeto criado aponta para a propriedade prototype da função construtora.

Por exemplo, como Array é uma funcão construtora, posso construir um novo objeto array assim:

const arr = new Array();
// `arr.[[Prototype]]` aponta para `Array.prototype`

// Podemos então, acessar, a partir do objeto construído,
// os métodos da propriedade `prototype` da função construtora,
// isto é, `arr.[[Prototype]]` aponta para `Array.prototype`.
typeof arr.map; // 'function'
typeof arr.filter; // 'function'
typeof arr.reduce; // 'function'

Assim, graças a cadeia de protótipos, todos os métodos de Array.prototype estarão disponíveis em arr. Para entender melhor, leia as respostas de Como funcionam protótipos em JavaScript? e de O que é Protótipo Javascript?.

Podemos concluir, então, que:

  • Array.prototype.forEach

    É a nomenclatura a ser usada para fazer referência a um método (nesse caso forEach) disponível na propriedade prototype de uma função construtora (como Array). Em face da cadeia de protótipos do JavaScript, o método forEach poderá ser acessado como propriedade de qualquer objeto construído a partir da função consttutora Array.

    Em outras palavras, podemos utilizar uma nomenclatura como Array.prototype.forEach para fazer referência aos métodos disponíveis nas "instâncias" de Array.

  • Array.from

    É a nomenclatura a ser usada para fazer referência a uma propriedade da função construtora Array. Como não faz parte de Array.prototype, não é passado às "instâncias" de Array. Pode-se dizer que é a nomenclatura a ser usada por "métodos estáticos".


Alguns exemplos:

// `arr` é como se fosse uma "instância" de `Array`:
const arr = new Array();

console.log(typeof Array.map); // 'undefined'
console.log(typeof Array.from); // 'function'

console.log('---');

console.log(typeof Array.prototype.map); // 'function'
console.log(typeof Array.prototype.from); // 'undefined'

console.log('---');

console.log(typeof arr.map); // 'function'
console.log(typeof arr.from); // 'undefined'

Note, no exemplo acima, que, se não modificado, arr "herdará" todas as propriedades de Array.prototype. O porquê disso foi no começo desta resposta.

Observe também que, embora disponível como propriedade da função construtora Array, o "método estático" Array.from não é acessível a partir de Array.prototype ou de arr (a "instância").

Saiba também que (para o exemplo acima):

  • arr.forEach é o mesmo que Array.prototype.forEach;
  • [].forEach é o mesmo que Array.prototype.forEach;

No entanto, é mais conveniente utilizar Array.prototype.forEach do que arr.forEach, já que este último depende do nome da variável (nesse caso, arr).

[].forEach também é válido, mas somente porque [] é uma forma literal do JavaScript que sempre irá se referir a um objeto array construído a partir de Array.

Em suma, o padrão <constructor>.prototype.<method> é sempre garantido para fazer referência aos métodos presentes em objetos construídos a partir de <constructor>.

0

Elas são diferentes. Array.prototype.forEach te permite acessar a função construtora do Array.forEach.

console.log(Array.forEach) // undefined
console.log(Array.prototype.forEach) // function forEach() { [native code] }

Desta forma você pode até mesmo modificar o comportamento do forEach.

let lista = ["Um", "dois"]

const inverter = function () {
  return lista.reverse()
}

// Aqui acesso o protótipo do forEach
Array.prototype.forEach = inverter


console.log(lista) // ["Um","dois"]
console.log(lista.forEach()) // ["dois", "Um"]

Em resumo você usa Array.forEach quando quer acessar o objeto e Array.prototype.forEach para o protótipo do objeto.

4
  • 3
    Como assim, “função construtora do forEach”? Commented 4/11/2020 às 21:43
  • Eu separei duas coisas para a resposta da sua pergunta, developer.mozilla.org/pt-BR/docs/Glossario/Prototype e developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…... No JS eu acredito que a maioria das funções nativas, quando você encontra ´[native code]´ em um retorno, ela é uma classe... Outra questão é que o @Thyago Dias lhe mostrou um exemplo pois não é recomendado mudar funções nativas pelo motivo de gerar erros internos a não ser que saiba o que está fazendo.
    – user167036
    Commented 4/11/2020 às 22:02
  • 2
    Thyago, eu ainda não consegui compreender o que você quis dizer com "[...] função construtora do Array.forEach". Poderia tentar esclarecer, por favor? Commented 15/11/2020 às 18:31
  • Um construtor nada mais é do que uma função, ou seja, função construtora é uma estrutura que descreve estados e comportamentos de um objeto. Uma classe pode ser considerada uma função construtora Commented 15/11/2020 às 20:50

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 .