Pode-se dizer que o prototype é o "antecessor das classes" para orientação a objetos do JavaScript. No entanto, vale enfatizar que as classes que foram implementadas no ECMAScript 2015 são apenas uma syntactic sugar para o prototype, e não são um novo modelo de orientação a objetos. Por baixo dos panos, tudo ainda é o prototype. :)
Desse modo, quando você cria uma função no JavaScript, ela pode acabar sendo usada como uma "classe", tendo inclusive métodos e propriedades — estáticas ou da instância; essas últimas podendo ser definidas através do prototype
.
function Person(name) {
// Corresponde ao construtor de uma classe.
console.log('Objeto construído.');
this.name = name;
}
// Definimos uma propriedade da instância.
Person.prototype.isHuman = true;
// Definimos uma propriedade da instância através do prototype.
Person.prototype.greet = function() {
console.log(`Hello! My name is ${this.name}.`);
};
// E um método estático:
Person.a = function() {
console.log('Método estático.');
};
Person.a();
const p = new Person('Luiz');
console.log(p.name);
p.greet();
p.a(); // Erro, já que `a` é um método estático.
Pessoalmente, eu não vejo mais razão para utilizar o prototype, já que é bem mais verboso que uma classe. Veja um código utilizando classes que faz exatamente a mesma coisa que o anterior:
class Person {
constructor(name) {
console.log('Objeto construído.');
this.name = name;
}
isHuman = true;
greet() {
console.log(`Hello! My name is ${this.name}.`);
}
static a() {
console.log('Método estático.');
}
}
Person.a();
const p = new Person('Luiz');
console.log(p.name);
p.greet();
p.a(); // Erro, já que `a` é um método estático.
Então, vai por preferência qual você deseja usar.
E em:
Como eu posso criar uma propriedade em um método no JavaScript?
No caso do query selector, className
ou firstChild
não são propriedades do método querySelector
em si. São, na verdade, propriedades do objeto que é retornado por tais métodos. É a mesma coisa que fazer isso:
const fakeDocument = {
querySelector: () => {
// Note que estamos retornando um objeto do nosso método.
return {
firstChild: 'Foo',
className: 'Bar'
};
}
};
console.log(fakeDocument.querySelector().firstChild); // Foo
console.log(fakeDocument.querySelector().className); // Bar
E não é nem necessário usar prototype
ou classes para atingir esse resultado. :)