{"id":208,"date":"2023-04-16T11:52:54","date_gmt":"2023-04-16T14:52:54","guid":{"rendered":"https:\/\/danielsegovia.com\/plataforma\/?p=208"},"modified":"2023-07-21T11:26:58","modified_gmt":"2023-07-21T14:26:58","slug":"16-metodos-de-objetos","status":"publish","type":"post","link":"https:\/\/danielsegovia.com\/plataforma\/16-metodos-de-objetos\/","title":{"rendered":"16 – M\u00e9todos de objetos"},"content":{"rendered":"\n

Pasito a pasito fuimos avanzando en el m\u00f3dulo hasta llegar al final de los contenidos t\u00e9cnicos, te has topado con l\u00f3gica de programaci\u00f3n, gr\u00e1ficos, variables, arrays, funciones, promesas, funciones as\u00edncronas, objetos, ejercicios y m\u00e1s. \u00bfTe imaginabas llegar hasta ac\u00e1?
No es sencillo pero tampoco imposible, hay que perseverar y sortear obst\u00e1culos pero aqu\u00ed est\u00e1s.
En el d\u00eda de hoy veremos algunos conceptos que complementan objetos en JavaScript pero principalmente utilizaremos la clase para ejercitar en problem\u00e1ticas de l\u00f3gica que se no se te pueden presentar en entrevistas<\/strong> laborales, as\u00ed que veamos algunos concepto y ya vayamos de lleno a los ejercicios.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Un mundo por descubrir<\/h2>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Continuando nuestra exploraci\u00f3n de los objetos en JavaScript, nos adentraremos en aspectos m\u00e1s avanzados que te permitir\u00e1n aprovechar al m\u00e1ximo su potencial. Ampliaremos nuestra comprensi\u00f3n de los objetos y exploraremos nuevas t\u00e9cnicas que har\u00e1n que tus habilidades en JavaScript se vuelvan a\u00fan m\u00e1s s\u00f3lidas.<\/p>\n\n\n\n

En primer lugar, exploraremos la iteraci\u00f3n de propiedades, que nos permitir\u00e1 recorrer todas las propiedades de un objeto y realizar acciones espec\u00edficas en cada una de ellas. Aprenderemos a utilizar bucles \u00abfor…in\u00bb y los m\u00e9todos proporcionados por el objeto \u00abObject\u00bb para iterar sobre las propiedades de manera eficiente y obtener informaci\u00f3n valiosa.<\/p>\n\n\n\n

Adem\u00e1s, profundizaremos en el uso de la palabra clave \u00abthis\u00bb. Entenderemos c\u00f3mo \u00abthis\u00bb se refiere al objeto actual en el contexto en el que se utiliza y c\u00f3mo nos proporciona acceso a las propiedades y m\u00e9todos del objeto en cuesti\u00f3n. Esto nos permitir\u00e1 escribir c\u00f3digo m\u00e1s flexible y din\u00e1mico al interactuar con objetos.<\/p>\n\n\n\n

Continuando con nuestra exploraci\u00f3n, introduciremos las clases y los constructores. Las clases nos brindan una forma estructurada y reutilizable de definir propiedades y m\u00e9todos comunes en nuestros objetos. Tambi\u00e9n aprenderemos sobre la herencia de objetos, que nos permite crear jerarqu\u00edas de clases y compartir funcionalidades entre ellas.<\/p>\n\n\n\n

Adem\u00e1s, nos adentraremos en el concepto de \u00abprototype\u00bb en JavaScript. Aprenderemos c\u00f3mo utilizar \u00abprototype\u00bb para agregar propiedades y m\u00e9todos a los objetos existentes y c\u00f3mo se relaciona con la herencia en JavaScript. Esta caracter\u00edstica \u00fanica de JavaScript nos permitir\u00e1 extender y modificar comportamientos de objetos de manera eficiente.<\/p>\n\n\n\n

Finalmente, exploraremos m\u00e9todos \u00fatiles proporcionados por objetos predefinidos en JavaScript, como \u00abObject.assign()\u00bb, \u00abObject.keys()\u00bb, \u00abObject.values()\u00bb y \u00abObject.entries()\u00bb. Estos m\u00e9todos nos brindar\u00e1n herramientas poderosas para manipular y obtener informaci\u00f3n espec\u00edfica de los objetos.<\/p>\n\n\n\n

Con estos nuevos conocimientos sobre iteraci\u00f3n, \u00abthis\u00bb, clases, herencia, \u00abprototype\u00bb y m\u00e9todos \u00fatiles, estar\u00e1s preparado para enfrentar desaf\u00edos m\u00e1s complejos y aprovechar todo el potencial que los objetos en JavaScript tienen para ofrecerte. \u00a1Continuemos nuestra emocionante aventura en el mundo de los objetos en JavaScript!<\/p>\n\n\n\n

<\/div>\n\n\n\n

Iteraci\u00f3n de propiedades<\/h3>\n\n\n\n

Iteraci\u00f3n de propiedades en JavaScript permite recorrer todas las propiedades de un objeto y realizar acciones espec\u00edficas en cada una de ellas. Hay varias formas de lograr esto, pero dos enfoques comunes son el uso de bucles \u00abfor…in\u00bb y los m\u00e9todos proporcionados por el objeto \u00abObject\u00bb.<\/p>\n\n\n\n

const person = {\n  name: 'John',\n  age: 30,\n  profession: 'Developer'\n};\n\n\/\/ Bucle \"for...in\"\nfor (const key in person) {\n  console.log(key + ': ' + person[key]);\n}\n\n\/\/ M\u00e9todos de Object\nconst keys = Object.keys(person);\nkeys.forEach((key) => {\n  console.log(key + ': ' + person[key]);\n});\n\nconst values = Object.values(person);\nvalues.forEach((value) => {\n  console.log(value);\n});\n\nconst entries = Object.entries(person);\nentries.forEach((entry) => {\n  const key = entry[0];\n  const value = entry[1];\n  console.log(key + ': ' + value);\n});<\/code><\/pre>\n\n\n\n
En este ejemplo, creamos un objeto person utilizando const para su definici\u00f3n. Luego, utilizamos tanto el bucle \u00abfor…in\u00bb como los m\u00e9todos de Object para iterar sobre las propiedades del objeto y realizar acciones espec\u00edficas, como imprimir el nombre y el valor de cada propiedad.<\/p>\n\n\n\n
<\/div>\n\n\n\n
this<\/h3>\n\n\n\n
En JavaScript, la palabra clave this<\/code> se utiliza para hacer referencia al objeto actual en el contexto en el que se encuentra. El valor de this<\/code> depende de c\u00f3mo se invoca una funci\u00f3n o c\u00f3mo se accede a un m\u00e9todo.<\/p>\n\n\n\n
Cuando this<\/code> se utiliza dentro de un m\u00e9todo de un objeto, se refiere al propio objeto. Esto permite acceder a las propiedades y m\u00e9todos del objeto utilizando this.propiedad<\/code> o this.metodo<\/code>.<\/p>\n\n\n\n
Sin embargo, this<\/code> puede tener diferentes valores en otros contextos. En una funci\u00f3n normal, this<\/code> se refiere al objeto global (window<\/code> en un navegador). En una funci\u00f3n de flecha, this<\/code> se mantiene vinculado al valor this<\/code> de su \u00e1mbito externo, lo que significa que no tiene su propio valor this<\/code>.<\/p>\n\n\n\n
Es importante comprender c\u00f3mo se comporta this<\/code> en diferentes contextos para utilizarlo correctamente y evitar confusiones.<\/p>\n\n\n\n
\/\/ Objeto persona\nconst persona = {\n  nombre: 'Juan',\n  edad: 30,\n  profesion: 'Desarrollador',\n  presentarse: function() {\n    console.log(`Mi nombre es ${this.nombre}. Tengo ${this.edad} a\u00f1os y soy ${this.profesion}.`);\n  }\n};\n\npersona.presentarse(); \/\/ Salida: Mi nombre es Juan. Tengo 30 a\u00f1os y soy Desarrollador.\n\n\/\/ Funci\u00f3n regular\nfunction saludar() {\n  console.log(`Hola, ${this.nombre}!`);\n}\n\n\/\/ Compartir el valor de this con una funci\u00f3n regular\nconst persona2 = {\n  nombre: 'Ana',\n  saludar: function() {\n    saludar.call(this);\n  }\n};\n\npersona2.saludar(); \/\/ Salida: Hola, Ana!\n\n\/\/ Funci\u00f3n de flecha\nconst despedirse = () => {\n  console.log(`\u00a1Adi\u00f3s, ${this.nombre}!`);\n};\n\n\/\/ Compartir el valor de this con una funci\u00f3n de flecha\nconst persona3 = {\n  nombre: 'Pedro',\n  despedirse: function() {\n    despedirse.call(this);\n  }\n};\n\npersona3.despedirse(); \/\/ Salida: \u00a1Adi\u00f3s, undefined!\n<\/code><\/pre>\n\n\n\n
En este ejemplo, primero tenemos un objeto llamado persona<\/code> con propiedades como nombre<\/code>, edad<\/code> y profesion<\/code>. Dentro del m\u00e9todo presentarse()<\/code>, utilizamos this<\/code> para acceder a las propiedades del objeto y mostrar informaci\u00f3n sobre la persona.<\/p>\n\n\n\n
Luego, tenemos una funci\u00f3n regular llamada saludar()<\/code>. En el objeto persona2<\/code>, utilizamos el m\u00e9todo call()<\/code> para compartir el valor de this<\/code> entre persona2<\/code> y saludar()<\/code>, lo que nos permite imprimir correctamente el saludo.<\/p>\n\n\n\n
Finalmente, en una funci\u00f3n de flecha (arrow function), this<\/code> no tiene su propio valor y mantiene el valor this<\/code> del \u00e1mbito externo en el que fue definida. Por lo tanto, cuando se utiliza this<\/code> dentro de una funci\u00f3n de flecha en el contexto de persona3.despedirse()<\/code>, el valor de this<\/code> se toma del \u00e1mbito externo, que en este caso es el objeto global (generalmente window<\/code> en un navegador o global<\/code> en Node.js).<\/p>\n\n\n\n
Clases<\/h3>\n\n\n\n
En JavaScript, una clase es una plantilla que define un tipo de objeto y sus propiedades, as\u00ed como los m\u00e9todos asociados a ese tipo de objeto. Proporciona una forma conveniente de crear m\u00faltiples objetos con caracter\u00edsticas similares.<\/p>\n\n\n\n
Una clase en JavaScript se define utilizando la sintaxis de clase, introducida en ECMAScript 2015 (ES6). Dentro de la clase, se pueden definir propiedades y m\u00e9todos que ser\u00e1n compartidos por todos los objetos creados a partir de esa clase.<\/p>\n\n\n\n
Uno de los elementos clave en una clase es el constructor. Un constructor es un m\u00e9todo especial dentro de una clase que se llama autom\u00e1ticamente cuando se crea un objeto a partir de la clase. Se utiliza para inicializar las propiedades del objeto y realizar cualquier otra configuraci\u00f3n necesaria.<\/p>\n\n\n\n
Aqu\u00ed tienes un ejemplo que ilustra la definici\u00f3n de una clase, el uso de un constructor y la creaci\u00f3n de objetos a partir de la misma:<\/p>\n\n\n\n
class Persona {\n  constructor(nombre, edad) {\n    this.nombre = nombre;\n    this.edad = edad;\n  }\n\n  saludar() {\n    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} a\u00f1os.`);\n  }\n}\n\n\/\/ Crear objetos a partir de la clase Persona\nconst persona1 = new Persona('Juan', 30);\nconst persona2 = new Persona('Ana', 25);\n\n\/\/ Acceder a las propiedades y m\u00e9todos de los objetos\nconsole.log(persona1.nombre); \/\/ Salida: Juan\nconsole.log(persona2.nombre); \/\/ Salida: Ana\n\npersona1.saludar(); \/\/ Salida: Hola, mi nombre es Juan y tengo 30 a\u00f1os.\npersona2.saludar(); \/\/ Salida: Hola, mi nombre es Ana y tengo 25 a\u00f1os.<\/code><\/pre>\n\n\n\n
En este ejemplo, hemos definido una clase llamada Persona<\/code> que tiene dos propiedades: nombre<\/code> y edad<\/code>. El constructor de la clase se utiliza para inicializar estas propiedades cuando se crea un objeto a partir de la clase.<\/p>\n\n\n\n
Luego, creamos dos objetos, persona1<\/code> y persona2<\/code>, utilizando la palabra clave new<\/code> seguida del nombre de la clase y pasando los argumentos requeridos por el constructor. Cada objeto tendr\u00e1 su propio conjunto de propiedades con valores espec\u00edficos.<\/p>\n\n\n\n
Finalmente, accedemos a las propiedades y al m\u00e9todo saludar()<\/code> de los objetos persona1<\/code> y persona2<\/code>. Podemos ver c\u00f3mo los mensajes de saludo var\u00edan dependiendo de los valores de las propiedades en cada objeto.<\/p>\n\n\n\n
La creaci\u00f3n de objetos a partir de una clase nos permite tener m\u00faltiples instancias con propiedades y comportamientos \u00fanicos. Cada objeto creado a partir de la misma clase es una entidad independiente con sus propios valores de propiedad, pero comparten los m\u00e9todos definidos en la clase.<\/p>\n\n\n\n
Herencia<\/h3>\n\n\n\n
La herencia es un concepto fundamental en la programaci\u00f3n orientada a objetos que permite crear jerarqu\u00edas de clases, donde las clases hijas heredan caracter\u00edsticas y comportamientos de una clase padre. En JavaScript, la herencia se logra utilizando el mecanismo de prototipos.<\/p>\n\n\n\n
En JavaScript, los objetos tienen un enlace interno llamado prototipo, que es una referencia a otro objeto. Cuando se intenta acceder a una propiedad o m\u00e9todo en un objeto, si no se encuentra en el objeto en s\u00ed, se busca en su prototipo. Esto permite la herencia de propiedades y m\u00e9todos entre objetos.<\/p>\n\n\n\n
La herencia en JavaScript se establece mediante el uso de la funci\u00f3n Object.create()<\/code> o utilizando la sintaxis de class<\/code> introducida en ECMAScript 2015 (ES6). Al crear una clase hija, podemos asignar como prototipo a la clase padre, lo que permite que la clase hija herede todas las propiedades y m\u00e9todos de la clase padre.<\/p>\n\n\n\n
Aqu\u00ed tienes un ejemplo que ilustra c\u00f3mo se puede lograr la herencia en JavaScript:<\/p>\n\n\n\n
class Animal {\n  constructor(nombre) {\n    this.nombre = nombre;\n  }\n\n  saludar() {\n    console.log(`Hola, soy ${this.nombre}.`);\n  }\n}\n\nclass Perro extends Animal {\n  constructor(nombre, raza) {\n    super(nombre);\n    this.raza = raza;\n  }\n\n  ladrar() {\n    console.log('\u00a1Guau guau!');\n  }\n}\n\nconst miPerro = new Perro('Fido', 'Labrador');\nmiPerro.saludar(); \/\/ Salida: Hola, soy Fido.\nmiPerro.ladrar(); \/\/ Salida: \u00a1Guau guau!\nconsole.log(miPerro.raza); \/\/ Salida: Labrador\n<\/code><\/pre>\n\n\n\n
En este ejemplo, hemos definido una clase Animal<\/code> que tiene una propiedad nombre<\/code> y un m\u00e9todo saludar()<\/code>. Luego, creamos una clase Perro<\/code> que extiende la clase Animal<\/code> utilizando la sintaxis de class<\/code>. La clase Perro<\/code> tambi\u00e9n tiene su propio constructor y un m\u00e9todo adicional ladrar()<\/code>.<\/p>\n\n\n\n
Al utilizar la palabra clave extends<\/code>, establecemos que la clase Perro<\/code> es una clase hija de Animal<\/code> y, por lo tanto, hereda todas las propiedades y m\u00e9todos de la clase padre. Utilizamos el m\u00e9todo super()<\/code> en el constructor de la clase hija para llamar al constructor de la clase padre y asignar el valor de nombre<\/code>.<\/p>\n\n\n\n
Luego, creamos un objeto miPerro<\/code> a partir de la clase Perro<\/code> y podemos acceder a las propiedades y m\u00e9todos tanto de la clase Perro<\/code> como de la clase Animal<\/code>. En este caso, llamamos al m\u00e9todo saludar()<\/code> y ladrar()<\/code> espec\u00edficos de la clase Perro<\/code>, as\u00ed como tambi\u00e9n accedemos a la propiedad raza<\/code> que es exclusiva de la clase Perro<\/code>.<\/p>\n\n\n\n
La herencia nos permite reutilizar y extender el c\u00f3digo de una clase existente, lo que resulta en un c\u00f3digo m\u00e1s limpio y estructurado. Permite la creaci\u00f3n de relaciones jer\u00e1rquicas entre clases, lo que es especialmente \u00fatil cuando queremos modelar objetos del mundo real que tienen caracter\u00edsticas comunes.<\/p>\n\n\n\n
Prototype<\/h3>\n\n\n\n
En JavaScript, cada objeto tiene una propiedad interna llamada [[Prototype]]<\/code> (a veces tambi\u00e9n conocida como __proto__<\/code>). El [[Prototype]]<\/code> es una referencia al objeto prototipo del cual el objeto actual ha sido creado.<\/p>\n\n\n\n
El mecanismo de prototype<\/code> en JavaScript permite la herencia de propiedades y m\u00e9todos entre objetos. Cada objeto tiene acceso a las propiedades y m\u00e9todos de su objeto prototipo, lo que permite extender y compartir funcionalidades entre objetos de manera eficiente.<\/p>\n\n\n\n
Aqu\u00ed tienes un ejemplo para ilustrar el uso de prototype<\/code> en JavaScript:<\/p>\n\n\n\n
function Animal(nombre) {\n  this.nombre = nombre;\n}\n\nAnimal.prototype.saludar = function() {\n  console.log(`Hola, soy ${this.nombre}.`);\n};\n\nfunction Perro(nombre, raza) {\n  Animal.call(this, nombre);\n  this.raza = raza;\n}\n\nPerro.prototype = Object.create(Animal.prototype);\nPerro.prototype.constructor = Perro;\n\nPerro.prototype.ladrar = function() {\n  console.log('\u00a1Guau guau!');\n};\n\nconst miPerro = new Perro('Fido', 'Labrador');\nmiPerro.saludar(); \/\/ Salida: Hola, soy Fido.\nmiPerro.ladrar(); \/\/ Salida: \u00a1Guau guau!\n<\/code><\/pre>\n\n\n\n
En este ejemplo, tenemos dos funciones constructoras: Animal<\/code> y Perro<\/code>. La funci\u00f3n constructora Animal<\/code> define una propiedad nombre<\/code> y un m\u00e9todo saludar<\/code>. La funci\u00f3n constructora Perro<\/code> hereda las propiedades y m\u00e9todos de Animal<\/code> utilizando el mecanismo de prototype<\/code>.<\/p>\n\n\n\n
Usamos Animal.call(this, nombre)<\/code> dentro de Perro<\/code> para asegurarnos de que la propiedad nombre<\/code> sea establecida correctamente en el objeto Perro<\/code>.<\/p>\n\n\n\n
Luego, establecemos el prototipo de Perro<\/code> utilizando Object.create(Animal.prototype)<\/code>. Esto crea un nuevo objeto cuyo prototipo es el objeto Animal.prototype<\/code>. As\u00ed, Perro<\/code> hereda las propiedades y m\u00e9todos de Animal<\/code> a trav\u00e9s de su prototipo.<\/p>\n\n\n\n
Finalmente, asignamos el constructor correcto a Perro.prototype<\/code> para asegurarnos de que Perro.prototype.constructor<\/code> se refiera a Perro<\/code> en lugar de Animal<\/code>.<\/p>\n\n\n\n
De esta manera, miPerro<\/code> es un objeto creado a partir de la funci\u00f3n constructora Perro<\/code>, pero tiene acceso a las propiedades y m\u00e9todos tanto de Perro<\/code> como de Animal<\/code> a trav\u00e9s del mecanismo de prototype<\/code>.<\/p>\n\n\n\n
El uso de prototype<\/code> es fundamental para la implementaci\u00f3n de herencia en JavaScript y permite una gesti\u00f3n eficiente de la memoria al compartir funcionalidades comunes entre objetos relacionados.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pasito a pasito fuimos avanzando en el m\u00f3dulo hasta llegar al final de los contenidos t\u00e9cnicos, te has topado con l\u00f3gica de programaci\u00f3n, gr\u00e1ficos, variables, arrays, funciones, promesas, funciones as\u00edncronas, objetos, ejercicios y m\u00e1s. \u00bfTe imaginabas llegar hasta ac\u00e1?No es sencillo pero tampoco imposible, hay que perseverar y sortear obst\u00e1culos pero aqu\u00ed est\u00e1s.En el d\u00eda … Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[11,8,10,39,6],"class_list":["post-208","post","type-post","status-publish","format-standard","hentry","category-curso-de-node-js","category-logica-de-programacion-con-javascript","tag-curso","tag-javascript","tag-nodejs","tag-objetos","tag-programacion"],"_links":{"self":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":10,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"predecessor-version":[{"id":638,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/posts\/208\/revisions\/638"}],"wp:attachment":[{"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danielsegovia.com\/plataforma\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}