7.1 Criando métodos de objeto
Métodos de objeto em JavaScript são funções que estão associadas a objetos e podem realizar ações nesses objetos. Métodos permitem que os objetos tenham seu comportamento, o que os torna uma parte importante da programação orientada a objetos. Abaixo, vamos ver como criar e usar métodos de objeto.
Métodos de objeto podem ser criados de várias maneiras. Vamos ver os principais.
1. Literal de objeto
Métodos podem ser criados diretamente no literal de objeto usando funções.
Neste exemplo, o objeto person tem um método greet() que retorna uma string usando a propriedade name do objeto:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Vai mostrar: Hello, my name is John
2. Sintaxe abreviada de métodos
Com o ES6, surgiu uma sintaxe abreviada para criar métodos de objeto.
Essa sintaxe torna o código mais conciso e legível:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Vai mostrar: Hello, my name is John
3. Adicionando métodos após a criação do objeto
Métodos podem ser adicionados a um objeto depois que ele for criado.
Neste exemplo, o método greet() é adicionado ao objeto person após sua criação:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Vai mostrar: Hello, my name is John
4. Uso de função construtora
Uma função construtora permite criar métodos para todas as instâncias de um objeto.
Neste exemplo, o método greet() é criado para cada instância de objeto criada usando a função construtora Person():
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Vai mostrar: Hello, my name is John
console.log(jane.greet()); // Vai mostrar: Hello, my name is Jane
7.2 Usando métodos de objeto
1. Acesso a métodos através do ponto
Métodos de objeto podem ser chamados usando a sintaxe de ponto:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Vai mostrar: Hello, my name is John
2. Acesso a métodos através de colchetes
Métodos de objeto também podem ser chamados usando colchetes:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Vai mostrar: Hello, my name is John
3. Chamada de método dentro de outro método
Métodos de objeto podem chamar outros métodos do mesmo objeto.
Neste exemplo, os métodos sum() e mul() usam valores definidos pelo método setValues():
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // Vai mostrar: 5
console.log(calculator.mul()); // Vai mostrar: 6
4. Uso de this em métodos
A palavra-chave this nos métodos de objeto refere-se ao próprio objeto, o que permite acessar suas propriedades e outros métodos:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Vai mostrar: Brand: Toyota, Model: Camry
5. Passando métodos como callbacks
Quando métodos de objeto são passados como callbacks, é importante considerar o valor de this:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Vai mostrar: Hello, my name is undefined
Neste exemplo, o valor de this é perdido quando o método greet() é passado como callback para setTimeout(). Como resultado, this dentro de greet() refere-se ao objeto global window. Em navegadores, o objeto window tem a propriedade name, que por padrão é uma string vazia "". Então é mostrado "Hello, my name is". Para manter o valor correto de this, é possível usar o método bind(), que vincula a função a um contexto específico:
setTimeout(person.greet.bind(person), 1000); // Vai mostrar: Hello, my first name is John
Ou usar uma função de seta:
setTimeout(() => person.greet(), 1000); // Vai mostrar: Hello, my first name is John
7.3 Compartilhando métodos
1. Herdando métodos através de protótipos
Métodos podem ser adicionados aos protótipos de objetos para que estejam disponíveis para todas as instâncias:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Vai mostrar: Hello, my name is John
console.log(jane.greet()); // Vai mostrar: Hello, my name is Jane
2. Usando métodos de outros objetos
Métodos de um objeto podem ser chamados para outro objeto usando o método call() ou apply():
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // Vai mostrar: Hello, my name is Jane
GO TO FULL VERSION