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>
.