7.1 Creación de métodos de objeto
Los métodos de objeto en JavaScript son funciones que están asociadas con objetos y pueden realizar acciones sobre esos objetos. Los métodos permiten que los objetos tengan su propio comportamiento, lo que los convierte en una parte importante de la programación orientada a objetos. A continuación, veremos la creación y uso de métodos de objetos.
Los métodos de objeto se pueden crear de varias formas. Veamos las principales.
1. Literal de objeto
Los métodos se pueden crear directamente en el literal del objeto usando funciones.
En este ejemplo, el objeto person tiene un método greet(), que retorna una cadena usando la propiedad name del objeto:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Mostrará: Hello, my name is John
2. Sintaxis abreviada de métodos
Con ES6, apareció una sintaxis abreviada para crear métodos de objeto.
Esta sintaxis hace que el código sea más conciso y fácil de leer:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Mostrará: Hello, my name is John
3. Añadiendo métodos después de crear el objeto
Los métodos pueden añadirse a un objeto después de crearlo.
En este ejemplo, el método greet() se añade al objeto person después de su creación:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Mostrará: Hello, my name is John
4. Uso de función constructora
La función constructora permite crear métodos para todas las instancias de un objeto.
En este ejemplo, el método greet() se crea para cada instancia del objeto creada con la función constructora 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()); // Mostrará: Hello, my name is John
console.log(jane.greet()); // Mostrará: Hello, my name is Jane
7.2 Uso de métodos de objeto
1. Acceso a métodos a través de punto
Los métodos de objeto se pueden llamar usando la sintaxis del punto:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Mostrará: Hello, my name is John
2. Acceso a métodos a través de corchetes
Los métodos de objeto también se pueden llamar usando corchetes:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Mostrará: Hello, my name is John
3. Llamada de un método dentro de otro método
Los métodos de objeto pueden llamar a otros métodos del mismo objeto.
En este ejemplo, los métodos sum() y mul() usan valores establecidos por el 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()); // Mostrará: 5
console.log(calculator.mul()); // Mostrará: 6
4. Usar this en métodos
La palabra clave this en los métodos de objeto se refiere al propio objeto, lo que permite acceder a sus propiedades y otros métodos:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Mostrará: Brand: Toyota, Model: Camry
5. Pasar métodos como callbacks
Cuando los métodos de objeto se pasan como callbacks, es importante considerar el valor de this:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Mostrará: Hello, my name is undefined
En este ejemplo, el valor de this se pierde cuando el método greet() se pasa como callback en setTimeout(). Como resultado, this dentro de greet() se refiere al objeto global window. En los navegadores, el objeto window tiene una propiedad name, que por defecto es una cadena vacía "". Por lo tanto, se muestra "Hello, my name is". Para conservar el valor correcto de this, se puede usar el método bind(), que vincula la función a un contexto específico:
setTimeout(person.greet.bind(person), 1000); // Mostrará: Hello, my name is John
O usar una función flecha:
setTimeout(() => person.greet(), 1000); // Mostrará: Hello, my name is John
7.3 Uso compartido de métodos
1. Herencia de métodos a través de prototipos
Los métodos se pueden añadir a los prototipos de los objetos, para que estén disponibles para todas las instancias:
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()); // Mostrará: Hello, my name is John
console.log(jane.greet()); // Mostrará: Hello, my name is Jane
2. Uso de métodos de otros objetos
Los métodos de un objeto pueden ser llamados para otro objeto usando el método call() o 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)); // Mostrará: Hello, my name is Jane
GO TO FULL VERSION