2

Boa noite pessoal, sou iniciante em Javascript, e estou com uma dúvida referente as propriedades.

Como eu posso criar uma propriedade em um método no Javascript? me refiro aos métodos pois estou aprendendo POO.

Por exemplo quando em um elemento usamos:

document.querySelector('#elemento').className
document.querySelector('#elemento').firstChild

Seria possível em um método ao chama-lo poder usar o . e em seguida a propriedade a qual queremos usar.

Tentei algo como:

const fn = function () {};
fn.prototype.name = 'Meu nome';

const run = new fn();
run.name // Meu nome
run.age // 20

Bom por esse meio crio uma função, e por meio dos Prototype consigo o que queria, executar uma função e chamar uma propriedade.

Não entendo ainda, para que serve o Prototype irei estuda-lo daqui pra frente. Mas como já informado como eu poderia fazer algo parecido com um método?

class teste {
    constructor() {

    }

    metodoComPropriedades() {

    }

    outroMetodo() {
        // Estava imaginando ao como isso:
        this.metodoComPropriedades().propriedade
    }

}

2 Respostas 2

3

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

1
  • 1
    Show, muito obrigado pela atenção @Luiz, entendi claramente agora, sua resposta foi muito útil, obrigado!
    – Magno
    Commented 23/11/2019 às 0:33
1

O que acontece no querySelector é que ele retorna um objeto (na verdade a referência) e, por isso, você tem acesso a diversas propriedades

function foo() {
    return {
        bar: 'r',
        baz: 'z'
    };
}
console.log(foo().bar); //"r"
console.log(foo().baz); //"z"
console.log(foo()); //{"bar": "r","baz": "z"}

3
  • Opa obrigado @Costamilam, entendi agora, muito obrigado pela resposta!
    – Magno
    Commented 23/11/2019 às 0:34
  • deixa eu te perguntar mais uma coisa, eu tenho o seguinte cenário, preciso constantemente verificar os campos de formulários, para pegar alguma informação de um dataset, uma classe, o valor daquele input etc, então por esse motivo que eu tive a ideia de criar um método seguindo seu exemplo e o do Luiz, para acessar toda vez que eu preciso x propriedade, que me dará acesso aquele elemento, porque antes sempre eu estava usando forEach, IF para verificar, esse jeito que arrumei para isso, é um meio mais profissional? porque antes estava ficando muito repetitivo.
    – Magno
    Commented 23/11/2019 às 3:25
  • Seria mais fácil responder isso vendo o código, pode ser que sim, é melhor fazer como falou, mas pode ser que não, de repente nem precisa da função. O que geralmente é usado é um framework ou biblioteca, mas, como você ainda está estudando o JavaScript, não seria ideal adicionar mais uma coisa pra estudar. Coloque o seu código num jsfiddle, repl.it, codepen, ... e comenta o link aqui
    – Costamilam
    Commented 23/11/2019 às 15:11

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 .