From 149b599368b4e27cf7d05f270a43519f599372fd Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 18 Jan 2022 00:57:02 +0000 Subject: [CRON] sync translated content --- files/es/_redirects.txt | 2 + files/es/_wikihistory.json | 40 +- .../objects/classes_in_javascript/index.html | 308 ++++++++++++++++ .../objects/classes_in_javascript/index.html | 401 +++++++++++++++++++++ .../javascript/objects/inheritance/index.html | 400 -------------------- .../objects/object-oriented_js/index.html | 307 ---------------- 6 files changed, 731 insertions(+), 727 deletions(-) create mode 100644 files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.html create mode 100644 files/es/learn/javascript/objects/classes_in_javascript/index.html delete mode 100644 files/es/learn/javascript/objects/inheritance/index.html delete mode 100644 files/es/learn/javascript/objects/object-oriented_js/index.html (limited to 'files/es') diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 2c0faa8c5e..bc65d530bf 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1187,6 +1187,8 @@ /es/docs/Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings /es/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings /es/docs/Learn/JavaScript/First_steps/Qué_es_JavaScript /es/docs/Learn/JavaScript/First_steps/What_is_JavaScript /es/docs/Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos /es/docs/Learn/JavaScript/Objects/Object_building_practice +/es/docs/Learn/JavaScript/Objects/Inheritance /es/docs/Learn/JavaScript/Objects/Classes_in_JavaScript +/es/docs/Learn/JavaScript/Objects/Object-oriented_JS /es/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript /es/docs/Learn/Server-side/Django/Introducción /es/docs/Learn/Server-side/Django/Introduction /es/docs/Learn/Server-side/Primeros_pasos /es/docs/Learn/Server-side/First_steps /es/docs/Learn/Server-side/Primeros_pasos/Introducción /es/docs/Learn/Server-side/First_steps/Introduction diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index dc0fdd2b06..889610fe22 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -3249,7 +3249,7 @@ "kevin-loal98" ] }, - "Learn/JavaScript/Objects/Inheritance": { + "Learn/JavaScript/Objects/Classes_in_JavaScript": { "modified": "2020-07-28T01:53:21.821Z", "contributors": [ "Fernando-Funes", @@ -3268,25 +3268,6 @@ "Enesimus" ] }, - "Learn/JavaScript/Objects/Object-oriented_JS": { - "modified": "2020-08-08T09:41:13.386Z", - "contributors": [ - "Nachec", - "andyesp", - "Fernando-Funes", - "jhonarielgj", - "rimbener", - "ReneAG", - "EnekoOdoo", - "ivanagui2", - "cristianmarquezp", - "djdouta", - "paulaco", - "martinGerez", - "anyruizd", - "Michelangeur" - ] - }, "Learn/JavaScript/Objects/Object_building_practice": { "modified": "2020-07-16T22:32:30.877Z", "contributors": [ @@ -21214,6 +21195,25 @@ "StripTM" ] }, + "conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript": { + "modified": "2020-08-08T09:41:13.386Z", + "contributors": [ + "Nachec", + "andyesp", + "Fernando-Funes", + "jhonarielgj", + "rimbener", + "ReneAG", + "EnekoOdoo", + "ivanagui2", + "cristianmarquezp", + "djdouta", + "paulaco", + "martinGerez", + "anyruizd", + "Michelangeur" + ] + }, "conflicting/MDN/Contribute/Getting_started": { "modified": "2019-01-16T18:56:38.941Z", "contributors": [ diff --git a/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.html b/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.html new file mode 100644 index 0000000000..8cafe5c160 --- /dev/null +++ b/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.html @@ -0,0 +1,308 @@ +--- +title: JavaScript orientado a objetos para principiantes +slug: conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript +tags: + - Aprender + - Artículo + - Constructor + - Crear + - Create + - JSOO + - JavaScript + - OOJS + - OOP + - Object + - Objeto + - Orientado a Objeto + - Principiante + - Programación orientada a objetos + - instance + - instanciar + - l10n:priority +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +original_slug: Learn/JavaScript/Objects/Object-oriented_JS +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+ +

Con lo básico fuera del camino, nos enfocaremos en Javascript Orientado a Objetos (JSOO) — este artículo presenta una descripción básica de la teoría de la Programación Orientada a Objetos (POO), luego explora cómo Javascript emula classes de objetos via funciones constructoras, y cómo crea instancias de objetos.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de computación, entendimiento básico de HTML y CSS, familiaridad con las bases de Javascript (ver Primeros pasos con JavaScript y Bloques de construcción JavaScript) y las bases de JSOO (ver Introducción a objetos).
Objetivo: +

Entender la teoría base de la programación orientada a objetos, como se relaciona esta con JavaScript ("todo es un objeto"), y como crear constructores e instacias de objetos.

+
+ +

Programacion Orientada a Objetos— lo básico

+ +

Para empezar, daremos una descripción simple y de alto nivel acerca de lo que es la Programación Orientada a Objetos (POO). Decimos simple, porque la POO puede volverse complicada rápidamente, y darte un tratamiento completo ahora, probablemente podría confundirte más que ayudar. La idea básica de la POO es que usamos objetos para modelar cosas del mundo real que queremos representar en nuestros programas, y/o proveemos una simple manera para acceder a la funcionalidad que, de otra manera, sería difícil o imposible de usar.

+ +

Los objetos pueden contener información y código relacionados, los cuales representan información acerca de lo que estás tratando de modelar, y la funcionalidad o comportamiento que deseas que tenga.  Los datos de un Objeto (y frecuentemente, también las funciones) se pueden almacenar ordenadamente (la palabra oficial es encapsular) dentro del paquete de un objeto (al que se puede asignar un nombre específico, llamado a veces espacio de nombres), haciéndolo fácil de estructurar y acceder; los objetos también se usan comúnmente como almacenes de datos que se pueden enviar fácilmente a través de la red.

+ +

Definiendo una plantilla de objeto

+ +

Vamos a considerar un sencillo programa que muestra información sobre estudiantes y profesores en una escuela. Aquí daremos un vistazo a la POO (Programación Orientada a Objetos) en general, no en el contexto de algún lenguaje de programación específico.

+ +

Para empezar, podríamos volver a ver al objeto Persona de nuestro artículo de primeros objetos, que define los datos generales y funcionalidades de una persona. Hay muchas cosas que podrías saber acerca de una persona (su dirección, estatura, tamaño de calzado, perfil de ADN, número de pasaporte, rasgos significativos de su personalidad...), pero, en este caso, solo estamos interesados en mostrar su nombre, edad, género e intereses, además de una pequeña introducción sobre este individuo basada en los datos anteriores. También queremos que sea capaz de saludar. 

+ +

Esto es conocido como abstracción —  crear un modelo simple de algo complejo que represente sus aspectos más importantes y que sea fácil de manipular para el propósito de nuestro programa.

+ +

+ +

En algunos lenguajes de POO, esta definición de tipo de objeto se la llama class (JavaScript utiliza diferentes mecanismos y terminologías, como verás a continuación) — esto no es en realidad un objeto, en vez de esto es un modelo que define las características que un objeto debería tener.

+ +

Creando objetos

+ +

Partiendo de nuestra clase, podemos crear instancias de objetos — objetos que contienen los datos y funcionalidades definidas en la clase original. Teniendo a nuestra clase Persona, ahora podemos crear gente con características más específicas: 

+ +

+ +

Cuando una instancia del objeto es creada a partir de una clase, se ejecuta la función constructora (constructor en inglés) de la clase para crearla. El proceso de crear una instancia del objeto desde una clase se llama instanciación.

+ +

Clases especializadas

+ +

En este caso nosotros no queremos personas genericas — queremos docentes y estudiantes, que son los dos tipos más específicos de personas. En POO, podemos crear nuevas clases basadas en otras clases, estas nuevas clases secundarias se pueden hacer para  heredar los datos y código de su clase primaria, de modo que pueden reutilizar la funcionalidad común a todos los tipos de objetos en lugar de tener que duplicarla. Cuando la funcionalidad difiere entre clases, puedes definir funciones especializadas directamente en ellas según sea necesario.

+ +

+ +

Esto es realmente útil, los profesores y los estudiantes comparten muchas características comunes como el nombre, el género y la edad, por lo que es conveniente tener que definir esas características solo una vez. También puedes definir la misma característica por separado en diferentes clases, ya que cada definición de esa característica estará en un espacio de nombres diferente. Por ejemplo, el saludo de un estudiante puede tener la forma "Yo, soy [Nombre]" (por ejemplo, Yo, soy Sam), mientras que un profesor puede usar algo más formal, como "Hola, mi nombre es [Prefix] [lastName], y enseño [Asunto] ". (Por ejemplo, Hola, mi nombre es Sr. Griffiths, y yo enseño Química).

+ +
+

Nota:  la palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es polimorfismo. Por si acaso te preguntabas.

+
+ +

Ahora puedes crear instancias de objetos de las clases "hijo". Por ejemplo:

+ +

+ +

En el resto del articulo, comenzaremos a ver como podemos practicar la teoría de POO en JavaScript.

+ +

Constructores e instancias de objetos

+ +

Algunas personas sostienen que JavaScript no es un verdadero lenguaje orientado a objetos — por ejemplo, su enunciado class es sólo azúcar sintáctica sobre la herencia prototípica existente y no es una class en el sentido tradicional. JavaScript, utiliza funciones especiales llamadas funciones constructoras para definir objetos y sus características. Son útiles porque a menudo te encontrarás con situaciones en las que no sabes cuántos objetos crearás; los constructores proporcionan los medios para crear tantos objetos como necesites de una manera efectiva, adjuntando datos y funciones a ellos según sea necesario.

+ +

Cuando se crea una nueva instancia del objeto a partir de una función constructora, su funcionalidad central (tal como se define en su prototipo, que exploraremos en el artículo Prototipos de objetos) no se copia en el nuevo objeto como lenguajes OO "clásicos", sino que la funcionalidad está vinculada a través de una cadena de referencia llamada cadena prototipo. Así que esto no es una verdadera instanciación, estrictamente hablando, JavaScript usa un mecanismo diferente para compartir funcionalidad entre objetos.

+ +
+

Nota: no ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello.

+
+ +

Exploremos la creación de clases a través de constructores y la creación de instancias de objetos a partir de ellas en JavaScript. En primer lugar, nos gustaría que hicieras una nueva copia local del archivo oojs.html que vimos en nuestro primer artículo de Objetos.

+ +

Un ejemplo simple

+ +
    +
  1. Comencemos por ver cómo puedes definir una persona con una funcion normal. Agrega esta funcion dentro del elemento script: + + 
    function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+  return obj;
+}
    +
    2. +
  2. Ahora puedes crear una nueva persona llamando a esta funcion — prueba con las siguientes lineas en la consola Javascript de tu navegador: + 
    var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();
    + Esto funciona bastante bien, pero es un poco largo; si sabemos que queremos crear un objeto, ¿por qué necesitamos crear explícitamente un nuevo objeto vacío y devolverlo? Afortunadamente, JavaScript nos proporciona un práctico acceso directo, en forma de funciones constructoras — ¡hagamos una ahora!
    3. +
  3. Reemplaza tu función anterior por la siguiente: + 
    function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
    +
    4. +
+ +

La función constructora es la versión de JavaScript de una clase. Notarás que tiene todas las características que esperas en una función, aunque no devuelve nada o crea explícitamente un objeto — básicamente sólo define propiedades y métodos. Verás que la palabra clave this se está usando aquí también — es básicamente decir que cuando se crea una de estas instancias de objeto, la propiedad name del objeto será igual al valor del nombre pasado a la llamada del constructor, y el método greeting() usará también el valor del nombre pasado a la llamada del constructor.

+ +
+

Nota: Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código.

+
+ +

Entonces, ¿cómo llamamos a un constructor para crear algunos objetos?

+ +
    +
  1. Agrega las siguientes líneas debajo de tu código anterior: + 
    var person1 = new Person('Bob');
+var person2 = new Person('Sarah');
    +
    2. +
  2. Guarda el código y vuelve a cargarlo en el navegador, e intenta ingresar las siguientes líneas en la consola Javascript : + 
    person1.name
+person1.greeting()
+person2.name
+person2.greeting()
    +
    3. +
+ +

¡Guaw! Ahora veras que tenemos dos nuevos objetos, cada uno de los cuales está almacenado en un espacio de nombres diferente: para acceder a sus propiedades y métodos, debes llamarlos como person1 o  person2; están cuidadosamente empaquetados para que no entren en conflicto con otras funciones. Sin embargo, tienen disponible la misma propiedad name y el método greeting(). Ten en cuenta que están utilizando su propio name que se les asignó cuando se crearon; esta es una razón por la cual es muy importante usar this, para que usen sus propios valores, y no algún otro valor.

+ +

Veamos nuevamente las llamadas del constructor:

+ +
var person1 = new Person('Bob');
+var person2 = new Person('Sarah');
+ +

En cada caso, la  palabra clave new se usa para indicarle al navegador que queremos crear una nueva instancia del objeto, seguida del nombre de la función con sus parámetros requeridos entre paréntesis, y el resultado se almacena en una variable — muy similar a cómo se llama a una función estándar. Cada instancia se crea de acuerdo con esta definición:

+ +
function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
+ +

Una vez creados los nuevos objetos, las variables person1 y person2 contienen los siguientes objetos:

+ +
{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

Ten en cuenta que cuando llamamos a nuestra función constructora, estamos definiendo greeting() cada vez, lo cual no es lo ideal. Para evitar esto, podemos definir funciones en el prototipo, que veremos más adelante.

+ +

Creando nuestro constructor final

+ +

El ejercicio que vimos anteriormente fue solo un ejemplo simple para comenzar. Ahora crearemos nuestra función constructor Person() final.

+ +
    +
  1. Elimina el código que insertaste hasta ahora y agrega este constructor de reemplazo; este es exactamente el mismo que el ejemplo simple del principio, con un poco más de complejidad: + 
    function Person(first, last, age, gender, interests) {
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}
    +
    2. +
  2. Ahora, agrega la siguiente línea para crear una instancia del objeto: + 
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    +
    3. +
+ +

Ahora verás que puedes acceder a las propiedades y métodos justo como lo hiciste anteriormente — intenta esto en tu consola JS:

+ +
person1['age']
+person1.interests[1]
+person1.bio()
+// etc.
+ +
+

Nota: Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve oojs-class-finished.html (también lo puedes ver corriendo en vivo).

+
+ +

Ejercicios adicionales

+ +

Para empezar, intenta añadir un par de líneas de creación de objetos propias, y trata de obtener y asignar valores a los miembros de las instancias del objeto.

+ +

Además, hay un par de problemas con nuestro método bio() — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y bio solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo interests. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses.

+ +
+

Note: Si estás atascado, hay una respuesta en nuestro repositorio de GitHub (see it live) — igualmente ¡intentea resolverla primero!

+
+ +

Otras formas de crear instancias de objetos

+ +

Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — declarando un objeto literal, y usando una función constructora (ver arriba).

+ +

Esto tiene sentido, pero hay otras formas — se muestran aquí para que te vayas familiarizando en caso de encontrarte con ellas.

+ +

El constructor Object()

+ +

Antes que nada, puedes usar el constructor Object() para crear un nuevo objeto. Si, incluso objetos genéricos tienen un constructor que genera un objeto vacío.

+ +
    +
  1. Intenta ingresar este código en la consola JavaScript de tu navegador: + 
    var person1 = new Object();
    +
    2. +
  2. Esto guarda un objeto vacío en la variable person1. Luego pueded agregar propiedades y métodos a este objeto usando la notación de punto (.) o de corchetes (['']); prueba estos ejemplos en tu consola: + 
    person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};
    +
    3. +
  3. También puedes pasar un objeto literal como parámetro al constructor Object(), para precargarlo con propiedades/métodos. Prueba esto en tu consola: + 
    var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});
    +
    4. +
+ +

Usando el método create()

+ +

Los constructores te pueden ayudar a ordenar tu código — puedes crear constructores en un lugar, y luego crear instancias cuando sean necesarias.

+ +

Sin embargo, algunas personas prefieren crear instancias de objetos sin crear antes constructores, especialmente si van a crear solamente pocas instancias de un objeto.

+ +

JavaScript tiene un método llamado create() que permite hacer esto. Con este método puedes crear un nuevo objeto basado en cualquier otro objeto existente.

+ +
    +
  1. Con tu ejercicio de la sección anterior cargado en el navegador, prueba esto en tu consola JavaScript + 
    var person2 = Object.create(person1);
    +
    2. +
  2. Y ahora prueba esto: + 
    person2.name
+person2.greeting()
    +
    3. +
+ +

Verás que person2 fue creado basado en person1 — tiene las mismas propiedades y métodos.

+ +

Una limitación del método create() es que no está soportado por el navegador IE8. Por lo que los constructores serán más efectivos sin necesitas soportar navegadores antiguos.

+ +

Más tarde, exploraremos en detalle los efectos de create().

+ +

Resumen

+ +

Este artículo provee una visión simplificada de la teoría de la orientación a objetos — esta no es toda la historia, pero te da una idea de con que estamos lidiando aquí. Adicionalmente, empezamos a ver como JavaScript está relacionado y difiere de la orientación a objetos "clásica", cómo usamos funciones constructoras para implementar clases en JavaScript, y diferentes formas de generar instancias de objetos.

+ +

En el próximo artículo, exploraremos los prototipos de objeto JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

+ +

En este modulo

+ + diff --git a/files/es/learn/javascript/objects/classes_in_javascript/index.html b/files/es/learn/javascript/objects/classes_in_javascript/index.html new file mode 100644 index 0000000000..2af15e98bf --- /dev/null +++ b/files/es/learn/javascript/objects/classes_in_javascript/index.html @@ -0,0 +1,401 @@ +--- +title: Herencia en JavaScript +slug: Learn/JavaScript/Objects/Classes_in_JavaScript +translation_of: Learn/JavaScript/Objects/Inheritance +original_slug: Learn/JavaScript/Objects/Inheritance +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
+ +

Con la mayoría de los detalles internos de OOJS (JavaScript Orientado a Objetos) explicados, este artículo muestra cómo crear clases "hijo" (constructores) que heredan características de sus clases "padre". Además, presentamos algunos consejos sobre cuándo y dónde puedes usar OOJS y cómo se crean las clases con la sintaxis moderna de ECMAScript.

+ + + + + + + + + + + + +
Pre-requisitos:Conocimientos básicos de informática, una comprensión básica de HTML y CSS, familiaridad con los principios básicos de JavaScript (ver Primeros pasos y Construyendo bloques) y conceptos básicos de OOJS (ver Introduccion a objetos).
Objetivo:Entender cómo es posible implementar la herencia en JavaScript.
+ +

Herencia prototípica

+ +

Hasta ahora hemos visto algo de herencia en acción — hemos visto cómo funcionan las cadenas de prototipos, y cómo los miembros son heredados subiendo una cadena. Pero principalmente esto ha involucrado funciones integradas del navegador. ¿Cómo creamos un objeto en JavaScript que hereda de otro objeto?

+ +

Exploremos cómo hacer esto con un ejemplo concreto.

+ +

Primeros pasos

+ +

Primero que nada, hazte una copia local de nuestro archivo  oojs-class-inheritance-start.html (míralo corriendo en vivo también). Dentro de aquí encontrarás el mismo ejemplo de constructor de Persona() que hemos estado usando a través del módulo, con una ligera diferencia — hemos definido solo las propiedades dentro del constructor:

+ +
function Persona(nombrePila, apellido, edad, genero, intereses) {
+  this.nombre = {
+    nombrePila,
+    apellido
+  };
+  this.edad = edad;
+  this.genero = genero;
+  this.intereses = intereses;
+};
+ +

Todos los métodos están definidos en el prototipo del constructor. Por ejemplo:

+ +
Persona.prototype.saludo = function() {
+  alert('¡Hola! soy ' + this.nombre.nombrePila + '.');
+};
+ +
+

Nota: En el código fuente, también verá los métodos bio() y despedida() definidos. Más tarde verá cómo estos pueden ser heredados por otros constructores.

+
+ +

Digamos que quisieramos crear una clase de Profesor, como la que describimos en nuestra definición inicial orientada a objetos, que hereda todos los miembros de Persona, pero también incluye:

+ +
    +
  1. Una nueva propiedad, materia — esto contendrá la materia que el profesor enseña.
    2. +
  2. Un método actualizado de saludo(), que suena un poco más formal que el método estándar de saludo() — más adecuado para un profesor que se dirige a algunos estudiantes en la escuela.
    3. +
+ +

Definiendo un constructor Profesor()

+ +

Lo primero que tenemos que hacer es crear el constructor Profesor()  — añadimos lo siguiente tras el código existente:

+ +
function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
+  Person.call(this, nombrePila, apellido, edad, genero, intereses);
+
+  this.materia = materia;
+}
+ +

Esto es similar al constructor de Persona en muchos aspectos, pero hay algo extraño aquí que no hemos visto antes: la función call (). Esta función básicamente le permite llamar a una función definida en otro lugar, pero en el contexto actual.
+ El primer parámetro especifica el valor de this que desea utilizar al ejecutar la función, y los otros parámetros son aquellos que deben pasarse a la función cuando se invoca.

+ +

Queremos que el constructor Profesor() tome los mismos parámetros que el constructor Persona() del que está heredando, por lo que los especificamos todos como parámetros en la invocación call().

+ +

La última línea dentro del constructor simplemente define la nueva propiedad subject que los profesores tendrán y que las personas genéricas no tienen.

+ +

Como nota, podríamos haber simplemente hecho esto:

+ +
function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
+  this.nombre = {
+    nombrePila,
+    apellido
+  };
+  this.edad = edad;
+  this.genero = genero;
+  this.intereses = intereses;
+  this.materia = materia;
+}
+ +

Pero esto es solo definir las propiedades de nuevo, no heredarlas de Persona(), por lo que anula el punto de lo que estamos tratando de hacer. También lleva más líneas de código.

+ +

Heredando de un constructor sin parámetros

+ +

Nótese que si el constructor del cual se está heredando no toma los valores de sus propiedades de parámetros, no se necesita especificarlos como argumentos adicionales en call(). Por ejemplo, si se tuviera algo muy simple como esto:

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

Se podrían heredar las propiedades width y height haciendo esto (así como los otros pasos descritos a continuación, por supuesto):

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Nótese que solo especificamos this dentro de call() — no se requieren otros parámetros ya que no estamos heredando ninguna propiedad del padre que sea establecida por parámetros.

+ +

Estableciendo el prototipo de Profesor() y su referencia al constructor

+ +

Todo va bien hasta ahora, pero tenemos un problema. Definimos un nuevo constructor, y tiene una propiedad prototype, la cual por defecto solo contiene una referencia a la función constructor en sí misma. No contiene los métodos de la propiedad prototype del constructor Persona. Para ver esto, introduzca Object.getOwnPropertyNames(Profesor.prototype) ya sea en el campo de texto o en la consola de Javascript . Introdúzcalo nuevamente, reemplazando Profesor con Persona. El nuevo constructor tampoco hereda esos métodos. Para ver esto, compare los resultados de Persona.prototype.saludo and Profesor.prototype.saludo. Necesitamos obtener Profesor() para obtener los métodos definidos en el prototipo de Persona(). ¿Cómo lo hacemos?

+ +
    +
  1. Añade la siguiente línea debajo de tu adición anterior: + 
    Profesor.prototype = Object.create(Persona.prototype);
    + Aquí es cuando nuestro amigo create() sale al rescate de nuevo. En este caso lo estamos usando para crear un nuevo objeto y hacerlo el valor de Profesor.prototype. El nuevo objeto tiene Persona.prototype como su prototipo y por lo tanto heredará, si y cuando lo necesite, todos los métodos disponibles en Persona.prototype.
    2. +
  2. Necesitamos hacer una cosa más antes de proseguir. Después de agregar la última línea, la propiedad constructor de  Profesor.prototype es ahora igual a Persona(), debido a que acabamos de asignar Profesor.prototype para que haga referencia a un objeto que hereda sus propiedades de Persona.prototype! Ahora prueba guardando tu código, carga la página en un explorador e intenta verificar en la consola el valor de  Profesor.prototype.constructor.
    3. +
  3. Esto puede volverse un problema, así que necesitamos corregirlo. Puedes hacerlo regresando a tu código y agregando la siguiente línea al final: + 
    Profesor.prototype.constructor = Profesor;
    +
    4. +
  4. Ahora, si guardas y actualizas, el valor de Profesor.prototype.constructor debe regresar Profesor(), como se espera, además de que ahora estamos heredando de Persona()!
    5. +
+ +

Dándole a Profesor() un nuevo método saludo()

+ +

Para finalizar nuestro código, necesitamos definir un nuevo método saludo() en el constructor de Profesor().

+ +

La manera más fácil es definirlo en el prototipo de Profesor() — agrega lo siguiente al final de tu código:

+ +
Profesor.prototype.saludo = function() {
+  var prefijo;
+
+  if (this.genero === 'masculino' || this.genero === 'Masculino' || this.genero === 'm' || this.genero === 'M') {
+    prefijo = 'Sr.';
+  } else if (this.genero === 'female' || this.genero === 'Femenino' || this.genero === 'f' || this.genero === 'F') {
+    prefijo = 'Sra.';
+  } else {
+    prefijo = 'Sx.';
+  }
+
+  alert('Hola. Mi nombre es ' + prefijo + ' ' + this.nombre.apellido + ', y enseño ' + this.materia + '.');
+};
+ +

Esto muestra el saludo del profesor, el cual además utiliza un prefijo apropiado para su género, resuelto utilizando un bloque else-if.

+ +

Probando el ejemplo

+ +

Ahora que ha ingresado todo el código, intente creando una instancia de objeto desde Profesor() poniendo lo que sigue al final de su archivo (o algo similar a su elección):

+ +
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
+ +

Ahora guarde y actualice, e intente accediendo a las propiedades y metodos de su nuevo teacher1 objecto, por ejemplo:

+ +
teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();
+ +

Esto deberia trabajar bien. Las consultas de las líneas 1, 2, 3, y 6 acceden a miembros heredados del genérico Person() constructor (clase). La consulta de la línea 4 accede un miembro que es disponible solamente en el mas especializado Teacher() constructor (clase). La consulta de la línea 5 accedería a un miembro desde Person(), excepto por el hecho que Teacher() tiene sus propios miembros con el mismo nombre, entonces la consulta accede a ese miembro.

+ +
+

Nota: Si tiene problemas con el funcionamiento, compare su código con nuestra versión final (vea corriendo en vivo también).

+
+ +

La técnica que mostramos aquí no es la única para crear herencia de clases en JavaScript, pero funciona OK, y le dá una buena idea acerca de cómo implementar herencia en JavaScript.

+ +

También estará interesado en verificar algo de las nuevas características de {{glossary("ECMAScript")}} que nos permiten hacer herencia mas claramente en JavaScript (véase Classes). No se cubrió todo aquí, como tampoco es soportado aún por todos los navegadores. Todo el otro código de constructores que se discutió aquí en estos artículos son soportados por IE9 o superior, y hay caminos para lograr superiores soportes que estos.

+ +

Un simple camino es usar una librería de JavaScript — la mayoría de las opciones mas populares tienen un facil ajuste de funcionalidad disponible para hacer herencia mas facil y rápido. CoffeeScript por ejemplo provee class, extends, etc.

+ +

Un ejercicio mas allá

+ +

En nuestra Sección teórica de POO, también incluimos una clase Student como un concepto, el cual hereda todas las características de Person, y también tiene un método diferende de greeting() que Person que es mas informal que el saludo de los profesores Teacher. Dele una mirada al saludo de los estudiantes, y trate de implementar su propio constructor de saludo Student() que herede todas las características de Person(), e implemente las diferentes funciones de saludo greeting().

+ +
+

Nota: Si tiene problemas resolviendo esto, dele una mirada a nuestra versión final (véala tambien funcionando ).

+
+ +

Resúmen de miembros objeto

+ +

To summarize, you've basically got three types of property/method to worry about:

+ +
    +
  1. Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the this.x = x type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the new keyword, e.g. var myInstance = new myConstructor()).
    2. +
  2. Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, not an instance. For example, Object.keys().
    3. +
  3. Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's prototype property, e.g. myConstructor.prototype.x().
    4. +
+ +

If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.

+ +

ECMAScript 2015 Classes

+ +

ECMAScript 2015 introduces class syntax to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.

+ +
+

Note: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about how the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).

+
+ +

Let's look at a rewritten version of the Person example, class-style:

+ +
class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+ +

The class statement indicates that we are creating a new class. Inside this block, we define all the features of the class:

+ + + +

We can now instantiate object instances using the new operator, in just the same way as we did before:

+ +
let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female' ['Government']]);
+leia.farewell();
+// Leia has left the building. Bye for now
+
+ +
+

Note: Under the hood, your classes are being converted into prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.

+
+ +

Inheritance with class syntax

+ +

Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized Teacher class, making it inherit from Person using modern class syntax. This is called creating a subclass or subclassing.

+ +

To create a subclass we use the extends keyword to tell JavaScript the class we want to base our class on.

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    this.name = {
+      first,
+      last
+    };
+
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  // subject and grade are specific to Teacher
+  this.subject = subject;
+  this.grade = grade;
+  }
+}
+ +

We can make the code more readable by defining the super() operator as the first item inside the constructor(). This will call the parent class' constructor, and inherit the members we specify as parameters of super(), as long as they are defined there:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+
+ +

When we instantiate Teacher object instances, we can now call methods and properties defined on both Teacher and Person, as we'd expect:

+ +
let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+
+ +

Like we did with Teachers, we could create other subclasses of Person to make them more specialized without modifying the base class.

+ +
+

Note: You can find this example on GitHub as es2015-class-inheritance.html (see it live also).

+
+ +

Getters and Setters

+ +

There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the Teacher example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.

+ +

We can handle such situations with getters and setters.

+ +

Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.

+ +

Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.

+ +

The modified Teacher class looks like this:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+
+ +

In our class above we have a getter and setter for the subject property. We use _  to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:

+ + + +

The example below shows the two features in action:

+ +
// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+
+ +
+

Note: You can find this example on GitHub as es2015-getters-setters.html (see it live also).

+
+ +

When would you use inheritance in JavaScript?

+ +

Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.

+ +

In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.

+ +

In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.

+ +
+

Note: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called delegation. Specialized objects delegate functionality to a generic object type.

+
+ +

When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.

+ +

Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.

+ +

Alternativas para extender la cadena del prototipos

+ +

En JavaScript, hay varias maneras diferentes de extender el prototipo de un objeto aparte de lo que hemos mostrado anteriormente. Para saber más sobre las otras formas, visite nuestro artículo Herencia y la cadena de prototipos.

+ +

Resumen

+ +

Este artículo ha cubierto el resto de la teoría y sintaxis central de OOJS que creemos que debería conocer ahora. En este punto debe entender los conceptos básicos de objetos JavaScript y POO, prototipos y herencia de prototipos, cómo crear clases (constructores) e instancias de objetos, añadir características a las clases y crear subclases que heredan de otras clases.

+ +

En el siguiente artículo veremos cómo trabajar con JavaScript Object Notation (JSON), un formato común de intercambio de datos escrito con objetos JavaScript.

+ +

Véase también

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

En éste módulo

+ + diff --git a/files/es/learn/javascript/objects/inheritance/index.html b/files/es/learn/javascript/objects/inheritance/index.html deleted file mode 100644 index e1cbba42da..0000000000 --- a/files/es/learn/javascript/objects/inheritance/index.html +++ /dev/null @@ -1,400 +0,0 @@ ---- -title: Herencia en JavaScript -slug: Learn/JavaScript/Objects/Inheritance -translation_of: Learn/JavaScript/Objects/Inheritance ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
- -

Con la mayoría de los detalles internos de OOJS (JavaScript Orientado a Objetos) explicados, este artículo muestra cómo crear clases "hijo" (constructores) que heredan características de sus clases "padre". Además, presentamos algunos consejos sobre cuándo y dónde puedes usar OOJS y cómo se crean las clases con la sintaxis moderna de ECMAScript.

- - - - - - - - - - - - -
Pre-requisitos:Conocimientos básicos de informática, una comprensión básica de HTML y CSS, familiaridad con los principios básicos de JavaScript (ver Primeros pasos y Construyendo bloques) y conceptos básicos de OOJS (ver Introduccion a objetos).
Objetivo:Entender cómo es posible implementar la herencia en JavaScript.
- -

Herencia prototípica

- -

Hasta ahora hemos visto algo de herencia en acción — hemos visto cómo funcionan las cadenas de prototipos, y cómo los miembros son heredados subiendo una cadena. Pero principalmente esto ha involucrado funciones integradas del navegador. ¿Cómo creamos un objeto en JavaScript que hereda de otro objeto?

- -

Exploremos cómo hacer esto con un ejemplo concreto.

- -

Primeros pasos

- -

Primero que nada, hazte una copia local de nuestro archivo  oojs-class-inheritance-start.html (míralo corriendo en vivo también). Dentro de aquí encontrarás el mismo ejemplo de constructor de Persona() que hemos estado usando a través del módulo, con una ligera diferencia — hemos definido solo las propiedades dentro del constructor:

- -
function Persona(nombrePila, apellido, edad, genero, intereses) {
-  this.nombre = {
-    nombrePila,
-    apellido
-  };
-  this.edad = edad;
-  this.genero = genero;
-  this.intereses = intereses;
-};
- -

Todos los métodos están definidos en el prototipo del constructor. Por ejemplo:

- -
Persona.prototype.saludo = function() {
-  alert('¡Hola! soy ' + this.nombre.nombrePila + '.');
-};
- -
-

Nota: En el código fuente, también verá los métodos bio() y despedida() definidos. Más tarde verá cómo estos pueden ser heredados por otros constructores.

-
- -

Digamos que quisieramos crear una clase de Profesor, como la que describimos en nuestra definición inicial orientada a objetos, que hereda todos los miembros de Persona, pero también incluye:

- -
    -
  1. Una nueva propiedad, materia — esto contendrá la materia que el profesor enseña.
    2. -
  2. Un método actualizado de saludo(), que suena un poco más formal que el método estándar de saludo() — más adecuado para un profesor que se dirige a algunos estudiantes en la escuela.
    3. -
- -

Definiendo un constructor Profesor()

- -

Lo primero que tenemos que hacer es crear el constructor Profesor()  — añadimos lo siguiente tras el código existente:

- -
function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
-  Person.call(this, nombrePila, apellido, edad, genero, intereses);
-
-  this.materia = materia;
-}
- -

Esto es similar al constructor de Persona en muchos aspectos, pero hay algo extraño aquí que no hemos visto antes: la función call (). Esta función básicamente le permite llamar a una función definida en otro lugar, pero en el contexto actual.
- El primer parámetro especifica el valor de this que desea utilizar al ejecutar la función, y los otros parámetros son aquellos que deben pasarse a la función cuando se invoca.

- -

Queremos que el constructor Profesor() tome los mismos parámetros que el constructor Persona() del que está heredando, por lo que los especificamos todos como parámetros en la invocación call().

- -

La última línea dentro del constructor simplemente define la nueva propiedad subject que los profesores tendrán y que las personas genéricas no tienen.

- -

Como nota, podríamos haber simplemente hecho esto:

- -
function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
-  this.nombre = {
-    nombrePila,
-    apellido
-  };
-  this.edad = edad;
-  this.genero = genero;
-  this.intereses = intereses;
-  this.materia = materia;
-}
- -

Pero esto es solo definir las propiedades de nuevo, no heredarlas de Persona(), por lo que anula el punto de lo que estamos tratando de hacer. También lleva más líneas de código.

- -

Heredando de un constructor sin parámetros

- -

Nótese que si el constructor del cual se está heredando no toma los valores de sus propiedades de parámetros, no se necesita especificarlos como argumentos adicionales en call(). Por ejemplo, si se tuviera algo muy simple como esto:

- -
function Brick() {
-  this.width = 10;
-  this.height = 20;
-}
- -

Se podrían heredar las propiedades width y height haciendo esto (así como los otros pasos descritos a continuación, por supuesto):

- -
function BlueGlassBrick() {
-  Brick.call(this);
-
-  this.opacity = 0.5;
-  this.color = 'blue';
-}
- -

Nótese que solo especificamos this dentro de call() — no se requieren otros parámetros ya que no estamos heredando ninguna propiedad del padre que sea establecida por parámetros.

- -

Estableciendo el prototipo de Profesor() y su referencia al constructor

- -

Todo va bien hasta ahora, pero tenemos un problema. Definimos un nuevo constructor, y tiene una propiedad prototype, la cual por defecto solo contiene una referencia a la función constructor en sí misma. No contiene los métodos de la propiedad prototype del constructor Persona. Para ver esto, introduzca Object.getOwnPropertyNames(Profesor.prototype) ya sea en el campo de texto o en la consola de Javascript . Introdúzcalo nuevamente, reemplazando Profesor con Persona. El nuevo constructor tampoco hereda esos métodos. Para ver esto, compare los resultados de Persona.prototype.saludo and Profesor.prototype.saludo. Necesitamos obtener Profesor() para obtener los métodos definidos en el prototipo de Persona(). ¿Cómo lo hacemos?

- -
    -
  1. Añade la siguiente línea debajo de tu adición anterior: - 
    Profesor.prototype = Object.create(Persona.prototype);
    - Aquí es cuando nuestro amigo create() sale al rescate de nuevo. En este caso lo estamos usando para crear un nuevo objeto y hacerlo el valor de Profesor.prototype. El nuevo objeto tiene Persona.prototype como su prototipo y por lo tanto heredará, si y cuando lo necesite, todos los métodos disponibles en Persona.prototype.
    2. -
  2. Necesitamos hacer una cosa más antes de proseguir. Después de agregar la última línea, la propiedad constructor de  Profesor.prototype es ahora igual a Persona(), debido a que acabamos de asignar Profesor.prototype para que haga referencia a un objeto que hereda sus propiedades de Persona.prototype! Ahora prueba guardando tu código, carga la página en un explorador e intenta verificar en la consola el valor de  Profesor.prototype.constructor.
    3. -
  3. Esto puede volverse un problema, así que necesitamos corregirlo. Puedes hacerlo regresando a tu código y agregando la siguiente línea al final: - 
    Profesor.prototype.constructor = Profesor;
    -
    4. -
  4. Ahora, si guardas y actualizas, el valor de Profesor.prototype.constructor debe regresar Profesor(), como se espera, además de que ahora estamos heredando de Persona()!
    5. -
- -

Dándole a Profesor() un nuevo método saludo()

- -

Para finalizar nuestro código, necesitamos definir un nuevo método saludo() en el constructor de Profesor().

- -

La manera más fácil es definirlo en el prototipo de Profesor() — agrega lo siguiente al final de tu código:

- -
Profesor.prototype.saludo = function() {
-  var prefijo;
-
-  if (this.genero === 'masculino' || this.genero === 'Masculino' || this.genero === 'm' || this.genero === 'M') {
-    prefijo = 'Sr.';
-  } else if (this.genero === 'female' || this.genero === 'Femenino' || this.genero === 'f' || this.genero === 'F') {
-    prefijo = 'Sra.';
-  } else {
-    prefijo = 'Sx.';
-  }
-
-  alert('Hola. Mi nombre es ' + prefijo + ' ' + this.nombre.apellido + ', y enseño ' + this.materia + '.');
-};
- -

Esto muestra el saludo del profesor, el cual además utiliza un prefijo apropiado para su género, resuelto utilizando un bloque else-if.

- -

Probando el ejemplo

- -

Ahora que ha ingresado todo el código, intente creando una instancia de objeto desde Profesor() poniendo lo que sigue al final de su archivo (o algo similar a su elección):

- -
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
- -

Ahora guarde y actualice, e intente accediendo a las propiedades y metodos de su nuevo teacher1 objecto, por ejemplo:

- -
teacher1.name.first;
-teacher1.interests[0];
-teacher1.bio();
-teacher1.subject;
-teacher1.greeting();
-teacher1.farewell();
- -

Esto deberia trabajar bien. Las consultas de las líneas 1, 2, 3, y 6 acceden a miembros heredados del genérico Person() constructor (clase). La consulta de la línea 4 accede un miembro que es disponible solamente en el mas especializado Teacher() constructor (clase). La consulta de la línea 5 accedería a un miembro desde Person(), excepto por el hecho que Teacher() tiene sus propios miembros con el mismo nombre, entonces la consulta accede a ese miembro.

- -
-

Nota: Si tiene problemas con el funcionamiento, compare su código con nuestra versión final (vea corriendo en vivo también).

-
- -

La técnica que mostramos aquí no es la única para crear herencia de clases en JavaScript, pero funciona OK, y le dá una buena idea acerca de cómo implementar herencia en JavaScript.

- -

También estará interesado en verificar algo de las nuevas características de {{glossary("ECMAScript")}} que nos permiten hacer herencia mas claramente en JavaScript (véase Classes). No se cubrió todo aquí, como tampoco es soportado aún por todos los navegadores. Todo el otro código de constructores que se discutió aquí en estos artículos son soportados por IE9 o superior, y hay caminos para lograr superiores soportes que estos.

- -

Un simple camino es usar una librería de JavaScript — la mayoría de las opciones mas populares tienen un facil ajuste de funcionalidad disponible para hacer herencia mas facil y rápido. CoffeeScript por ejemplo provee class, extends, etc.

- -

Un ejercicio mas allá

- -

En nuestra Sección teórica de POO, también incluimos una clase Student como un concepto, el cual hereda todas las características de Person, y también tiene un método diferende de greeting() que Person que es mas informal que el saludo de los profesores Teacher. Dele una mirada al saludo de los estudiantes, y trate de implementar su propio constructor de saludo Student() que herede todas las características de Person(), e implemente las diferentes funciones de saludo greeting().

- -
-

Nota: Si tiene problemas resolviendo esto, dele una mirada a nuestra versión final (véala tambien funcionando ).

-
- -

Resúmen de miembros objeto

- -

To summarize, you've basically got three types of property/method to worry about:

- -
    -
  1. Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the this.x = x type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the new keyword, e.g. var myInstance = new myConstructor()).
    2. -
  2. Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, not an instance. For example, Object.keys().
    3. -
  3. Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's prototype property, e.g. myConstructor.prototype.x().
    4. -
- -

If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.

- -

ECMAScript 2015 Classes

- -

ECMAScript 2015 introduces class syntax to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.

- -
-

Note: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about how the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).

-
- -

Let's look at a rewritten version of the Person example, class-style:

- -
class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  greeting() {
-    console.log(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
- -

The class statement indicates that we are creating a new class. Inside this block, we define all the features of the class:

- - - -

We can now instantiate object instances using the new operator, in just the same way as we did before:

- -
let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
-han.greeting();
-// Hi! I'm Han
-
-let leia = new Person('Leia', 'Organa', 19, 'female' ['Government']]);
-leia.farewell();
-// Leia has left the building. Bye for now
-
- -
-

Note: Under the hood, your classes are being converted into prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.

-
- -

Inheritance with class syntax

- -

Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized Teacher class, making it inherit from Person using modern class syntax. This is called creating a subclass or subclassing.

- -

To create a subclass we use the extends keyword to tell JavaScript the class we want to base our class on.

- -
class Teacher extends Person {
-  constructor(first, last, age, gender, interests, subject, grade) {
-    this.name = {
-      first,
-      last
-    };
-
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  // subject and grade are specific to Teacher
-  this.subject = subject;
-  this.grade = grade;
-  }
-}
- -

We can make the code more readable by defining the super() operator as the first item inside the constructor(). This will call the parent class' constructor, and inherit the members we specify as parameters of super(), as long as they are defined there:

- -
class Teacher extends Person {
-  constructor(first, last, age, gender, interests, subject, grade) {
-    super(first, last, age, gender, interests);
-
-    // subject and grade are specific to Teacher
-    this.subject = subject;
-    this.grade = grade;
-  }
-}
-
- -

When we instantiate Teacher object instances, we can now call methods and properties defined on both Teacher and Person, as we'd expect:

- -
let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
-snape.greeting(); // Hi! I'm Severus.
-snape.farewell(); // Severus has left the building. Bye for now.
-snape.age // 58
-snape.subject; // Dark arts
-
- -

Like we did with Teachers, we could create other subclasses of Person to make them more specialized without modifying the base class.

- -
-

Note: You can find this example on GitHub as es2015-class-inheritance.html (see it live also).

-
- -

Getters and Setters

- -

There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the Teacher example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.

- -

We can handle such situations with getters and setters.

- -

Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.

- -

Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.

- -

The modified Teacher class looks like this:

- -
class Teacher extends Person {
-  constructor(first, last, age, gender, interests, subject, grade) {
-    super(first, last, age, gender, interests);
-    // subject and grade are specific to Teacher
-    this._subject = subject;
-    this.grade = grade;
-  }
-
-  get subject() {
-    return this._subject;
-  }
-
-  set subject(newSubject) {
-    this._subject = newSubject;
-  }
-}
-
- -

In our class above we have a getter and setter for the subject property. We use _  to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:

- - - -

The example below shows the two features in action:

- -
// Check the default value
-console.log(snape.subject) // Returns "Dark arts"
-
-// Change the value
-snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
-
-// Check it again and see if it matches the new value
-console.log(snape.subject) // Returns "Balloon animals"
-
- -
-

Note: You can find this example on GitHub as es2015-getters-setters.html (see it live also).

-
- -

When would you use inheritance in JavaScript?

- -

Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.

- -

In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.

- -

In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.

- -
-

Note: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called delegation. Specialized objects delegate functionality to a generic object type.

-
- -

When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.

- -

Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.

- -

Alternativas para extender la cadena del prototipos

- -

En JavaScript, hay varias maneras diferentes de extender el prototipo de un objeto aparte de lo que hemos mostrado anteriormente. Para saber más sobre las otras formas, visite nuestro artículo Herencia y la cadena de prototipos.

- -

Resumen

- -

Este artículo ha cubierto el resto de la teoría y sintaxis central de OOJS que creemos que debería conocer ahora. En este punto debe entender los conceptos básicos de objetos JavaScript y POO, prototipos y herencia de prototipos, cómo crear clases (constructores) e instancias de objetos, añadir características a las clases y crear subclases que heredan de otras clases.

- -

En el siguiente artículo veremos cómo trabajar con JavaScript Object Notation (JSON), un formato común de intercambio de datos escrito con objetos JavaScript.

- -

Véase también

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

En éste módulo

- - diff --git a/files/es/learn/javascript/objects/object-oriented_js/index.html b/files/es/learn/javascript/objects/object-oriented_js/index.html deleted file mode 100644 index 5eb023c685..0000000000 --- a/files/es/learn/javascript/objects/object-oriented_js/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: JavaScript orientado a objetos para principiantes -slug: Learn/JavaScript/Objects/Object-oriented_JS -tags: - - Aprender - - Artículo - - Constructor - - Crear - - Create - - JSOO - - JavaScript - - OOJS - - OOP - - Object - - Objeto - - Orientado a Objeto - - Principiante - - Programación orientada a objetos - - instance - - instanciar - - 'l10n:priority' -translation_of: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Con lo básico fuera del camino, nos enfocaremos en Javascript Orientado a Objetos (JSOO) — este artículo presenta una descripción básica de la teoría de la Programación Orientada a Objetos (POO), luego explora cómo Javascript emula classes de objetos via funciones constructoras, y cómo crea instancias de objetos.

- - - - - - - - - - - - -
Prerequisitos:Conocimientos básicos de computación, entendimiento básico de HTML y CSS, familiaridad con las bases de Javascript (ver Primeros pasos con JavaScript y Bloques de construcción JavaScript) y las bases de JSOO (ver Introducción a objetos).
Objetivo: -

Entender la teoría base de la programación orientada a objetos, como se relaciona esta con JavaScript ("todo es un objeto"), y como crear constructores e instacias de objetos.

-
- -

Programacion Orientada a Objetos— lo básico

- -

Para empezar, daremos una descripción simple y de alto nivel acerca de lo que es la Programación Orientada a Objetos (POO). Decimos simple, porque la POO puede volverse complicada rápidamente, y darte un tratamiento completo ahora, probablemente podría confundirte más que ayudar. La idea básica de la POO es que usamos objetos para modelar cosas del mundo real que queremos representar en nuestros programas, y/o proveemos una simple manera para acceder a la funcionalidad que, de otra manera, sería difícil o imposible de usar.

- -

Los objetos pueden contener información y código relacionados, los cuales representan información acerca de lo que estás tratando de modelar, y la funcionalidad o comportamiento que deseas que tenga.  Los datos de un Objeto (y frecuentemente, también las funciones) se pueden almacenar ordenadamente (la palabra oficial es encapsular) dentro del paquete de un objeto (al que se puede asignar un nombre específico, llamado a veces espacio de nombres), haciéndolo fácil de estructurar y acceder; los objetos también se usan comúnmente como almacenes de datos que se pueden enviar fácilmente a través de la red.

- -

Definiendo una plantilla de objeto

- -

Vamos a considerar un sencillo programa que muestra información sobre estudiantes y profesores en una escuela. Aquí daremos un vistazo a la POO (Programación Orientada a Objetos) en general, no en el contexto de algún lenguaje de programación específico.

- -

Para empezar, podríamos volver a ver al objeto Persona de nuestro artículo de primeros objetos, que define los datos generales y funcionalidades de una persona. Hay muchas cosas que podrías saber acerca de una persona (su dirección, estatura, tamaño de calzado, perfil de ADN, número de pasaporte, rasgos significativos de su personalidad...), pero, en este caso, solo estamos interesados en mostrar su nombre, edad, género e intereses, además de una pequeña introducción sobre este individuo basada en los datos anteriores. También queremos que sea capaz de saludar. 

- -

Esto es conocido como abstracción —  crear un modelo simple de algo complejo que represente sus aspectos más importantes y que sea fácil de manipular para el propósito de nuestro programa.

- -

- -

En algunos lenguajes de POO, esta definición de tipo de objeto se la llama class (JavaScript utiliza diferentes mecanismos y terminologías, como verás a continuación) — esto no es en realidad un objeto, en vez de esto es un modelo que define las características que un objeto debería tener.

- -

Creando objetos

- -

Partiendo de nuestra clase, podemos crear instancias de objetos — objetos que contienen los datos y funcionalidades definidas en la clase original. Teniendo a nuestra clase Persona, ahora podemos crear gente con características más específicas: 

- -

- -

Cuando una instancia del objeto es creada a partir de una clase, se ejecuta la función constructora (constructor en inglés) de la clase para crearla. El proceso de crear una instancia del objeto desde una clase se llama instanciación.

- -

Clases especializadas

- -

En este caso nosotros no queremos personas genericas — queremos docentes y estudiantes, que son los dos tipos más específicos de personas. En POO, podemos crear nuevas clases basadas en otras clases, estas nuevas clases secundarias se pueden hacer para  heredar los datos y código de su clase primaria, de modo que pueden reutilizar la funcionalidad común a todos los tipos de objetos en lugar de tener que duplicarla. Cuando la funcionalidad difiere entre clases, puedes definir funciones especializadas directamente en ellas según sea necesario.

- -

- -

Esto es realmente útil, los profesores y los estudiantes comparten muchas características comunes como el nombre, el género y la edad, por lo que es conveniente tener que definir esas características solo una vez. También puedes definir la misma característica por separado en diferentes clases, ya que cada definición de esa característica estará en un espacio de nombres diferente. Por ejemplo, el saludo de un estudiante puede tener la forma "Yo, soy [Nombre]" (por ejemplo, Yo, soy Sam), mientras que un profesor puede usar algo más formal, como "Hola, mi nombre es [Prefix] [lastName], y enseño [Asunto] ". (Por ejemplo, Hola, mi nombre es Sr. Griffiths, y yo enseño Química).

- -
-

Nota:  la palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es polimorfismo. Por si acaso te preguntabas.

-
- -

Ahora puedes crear instancias de objetos de las clases "hijo". Por ejemplo:

- -

- -

En el resto del articulo, comenzaremos a ver como podemos practicar la teoría de POO en JavaScript.

- -

Constructores e instancias de objetos

- -

Algunas personas sostienen que JavaScript no es un verdadero lenguaje orientado a objetos — por ejemplo, su enunciado class es sólo azúcar sintáctica sobre la herencia prototípica existente y no es una class en el sentido tradicional. JavaScript, utiliza funciones especiales llamadas funciones constructoras para definir objetos y sus características. Son útiles porque a menudo te encontrarás con situaciones en las que no sabes cuántos objetos crearás; los constructores proporcionan los medios para crear tantos objetos como necesites de una manera efectiva, adjuntando datos y funciones a ellos según sea necesario.

- -

Cuando se crea una nueva instancia del objeto a partir de una función constructora, su funcionalidad central (tal como se define en su prototipo, que exploraremos en el artículo Prototipos de objetos) no se copia en el nuevo objeto como lenguajes OO "clásicos", sino que la funcionalidad está vinculada a través de una cadena de referencia llamada cadena prototipo. Así que esto no es una verdadera instanciación, estrictamente hablando, JavaScript usa un mecanismo diferente para compartir funcionalidad entre objetos.

- -
-

Nota: no ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello.

-
- -

Exploremos la creación de clases a través de constructores y la creación de instancias de objetos a partir de ellas en JavaScript. En primer lugar, nos gustaría que hicieras una nueva copia local del archivo oojs.html que vimos en nuestro primer artículo de Objetos.

- -

Un ejemplo simple

- -
    -
  1. Comencemos por ver cómo puedes definir una persona con una funcion normal. Agrega esta funcion dentro del elemento script: - - 
    function createNewPerson(name) {
-  var obj = {};
-  obj.name = name;
-  obj.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Ahora puedes crear una nueva persona llamando a esta funcion — prueba con las siguientes lineas en la consola Javascript de tu navegador: - 
    var salva = createNewPerson('Salva');
-salva.name;
-salva.greeting();
    - Esto funciona bastante bien, pero es un poco largo; si sabemos que queremos crear un objeto, ¿por qué necesitamos crear explícitamente un nuevo objeto vacío y devolverlo? Afortunadamente, JavaScript nos proporciona un práctico acceso directo, en forma de funciones constructoras — ¡hagamos una ahora!
    3. -
  3. Reemplaza tu función anterior por la siguiente: - 
    function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
    -
    4. -
- -

La función constructora es la versión de JavaScript de una clase. Notarás que tiene todas las características que esperas en una función, aunque no devuelve nada o crea explícitamente un objeto — básicamente sólo define propiedades y métodos. Verás que la palabra clave this se está usando aquí también — es básicamente decir que cuando se crea una de estas instancias de objeto, la propiedad name del objeto será igual al valor del nombre pasado a la llamada del constructor, y el método greeting() usará también el valor del nombre pasado a la llamada del constructor.

- -
-

Nota: Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código.

-
- -

Entonces, ¿cómo llamamos a un constructor para crear algunos objetos?

- -
    -
  1. Agrega las siguientes líneas debajo de tu código anterior: - 
    var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
    -
    2. -
  2. Guarda el código y vuelve a cargarlo en el navegador, e intenta ingresar las siguientes líneas en la consola Javascript : - 
    person1.name
-person1.greeting()
-person2.name
-person2.greeting()
    -
    3. -
- -

¡Guaw! Ahora veras que tenemos dos nuevos objetos, cada uno de los cuales está almacenado en un espacio de nombres diferente: para acceder a sus propiedades y métodos, debes llamarlos como person1 o  person2; están cuidadosamente empaquetados para que no entren en conflicto con otras funciones. Sin embargo, tienen disponible la misma propiedad name y el método greeting(). Ten en cuenta que están utilizando su propio name que se les asignó cuando se crearon; esta es una razón por la cual es muy importante usar this, para que usen sus propios valores, y no algún otro valor.

- -

Veamos nuevamente las llamadas del constructor:

- -
var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
- -

En cada caso, la  palabra clave new se usa para indicarle al navegador que queremos crear una nueva instancia del objeto, seguida del nombre de la función con sus parámetros requeridos entre paréntesis, y el resultado se almacena en una variable — muy similar a cómo se llama a una función estándar. Cada instancia se crea de acuerdo con esta definición:

- -
function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

Una vez creados los nuevos objetos, las variables person1 y person2 contienen los siguientes objetos:

- -
{
-  name: 'Bob',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-{
-  name: 'Sarah',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

Ten en cuenta que cuando llamamos a nuestra función constructora, estamos definiendo greeting() cada vez, lo cual no es lo ideal. Para evitar esto, podemos definir funciones en el prototipo, que veremos más adelante.

- -

Creando nuestro constructor final

- -

El ejercicio que vimos anteriormente fue solo un ejemplo simple para comenzar. Ahora crearemos nuestra función constructor Person() final.

- -
    -
  1. Elimina el código que insertaste hasta ahora y agrega este constructor de reemplazo; este es exactamente el mismo que el ejemplo simple del principio, con un poco más de complejidad: - 
    function Person(first, last, age, gender, interests) {
-  this.name = {
-    'first': first,
-    'last' : last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.bio = function() {
-    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  };
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name.first + '.');
-  };
-}
    -
    2. -
  2. Ahora, agrega la siguiente línea para crear una instancia del objeto: - 
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    -
    3. -
- -

Ahora verás que puedes acceder a las propiedades y métodos justo como lo hiciste anteriormente — intenta esto en tu consola JS:

- -
person1['age']
-person1.interests[1]
-person1.bio()
-// etc.
- -
-

Nota: Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve oojs-class-finished.html (también lo puedes ver corriendo en vivo).

-
- -

Ejercicios adicionales

- -

Para empezar, intenta añadir un par de líneas de creación de objetos propias, y trata de obtener y asignar valores a los miembros de las instancias del objeto.

- -

Además, hay un par de problemas con nuestro método bio() — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y bio solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo interests. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses.

- -
-

Note: Si estás atascado, hay una respuesta en nuestro repositorio de GitHub (see it live) — igualmente ¡intentea resolverla primero!

-
- -

Otras formas de crear instancias de objetos

- -

Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — declarando un objeto literal, y usando una función constructora (ver arriba).

- -

Esto tiene sentido, pero hay otras formas — se muestran aquí para que te vayas familiarizando en caso de encontrarte con ellas.

- -

El constructor Object()

- -

Antes que nada, puedes usar el constructor Object() para crear un nuevo objeto. Si, incluso objetos genéricos tienen un constructor que genera un objeto vacío.

- -
    -
  1. Intenta ingresar este código en la consola JavaScript de tu navegador: - 
    var person1 = new Object();
    -
    2. -
  2. Esto guarda un objeto vacío en la variable person1. Luego pueded agregar propiedades y métodos a este objeto usando la notación de punto (.) o de corchetes (['']); prueba estos ejemplos en tu consola: - 
    person1.name = 'Chris';
-person1['age'] = 38;
-person1.greeting = function() {
-  alert('Hi! I\'m ' + this.name + '.');
-};
    -
    3. -
  3. También puedes pasar un objeto literal como parámetro al constructor Object(), para precargarlo con propiedades/métodos. Prueba esto en tu consola: - 
    var person1 = new Object({
-  name: 'Chris',
-  age: 38,
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-});
    -
    4. -
- -

Usando el método create()

- -

Los constructores te pueden ayudar a ordenar tu código — puedes crear constructores en un lugar, y luego crear instancias cuando sean necesarias.

- -

Sin embargo, algunas personas prefieren crear instancias de objetos sin crear antes constructores, especialmente si van a crear solamente pocas instancias de un objeto.

- -

JavaScript tiene un método llamado create() que permite hacer esto. Con este método puedes crear un nuevo objeto basado en cualquier otro objeto existente.

- -
    -
  1. Con tu ejercicio de la sección anterior cargado en el navegador, prueba esto en tu consola JavaScript - 
    var person2 = Object.create(person1);
    -
    2. -
  2. Y ahora prueba esto: - 
    person2.name
-person2.greeting()
    -
    3. -
- -

Verás que person2 fue creado basado en person1 — tiene las mismas propiedades y métodos.

- -

Una limitación del método create() es que no está soportado por el navegador IE8. Por lo que los constructores serán más efectivos sin necesitas soportar navegadores antiguos.

- -

Más tarde, exploraremos en detalle los efectos de create().

- -

Resumen

- -

Este artículo provee una visión simplificada de la teoría de la orientación a objetos — esta no es toda la historia, pero te da una idea de con que estamos lidiando aquí. Adicionalmente, empezamos a ver como JavaScript está relacionado y difiere de la orientación a objetos "clásica", cómo usamos funciones constructoras para implementar clases en JavaScript, y diferentes formas de generar instancias de objetos.

- -

En el próximo artículo, exploraremos los prototipos de objeto JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

- -

En este modulo

- - -- cgit v1.2.3-54-g00ecf