Prototype

Jenylin · Mar 9, 2020 · c8de807 · c8de807
1 parent ab00b04
commit c8de807
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 19 deletions.
diff --git a/Sesion-05/Ejemplo-01/Readme.md b/Sesion-05/Ejemplo-01/Readme.md
@@ -6,7 +6,7 @@
 
 ### Objetivo
 
-Aprender a usar constructores para instanciar objetos.
+Crear constructores para instanciar objetos.
 
 #### Requisitos
 

diff --git a/Sesion-05/Ejemplo-02/Readme.md b/Sesion-05/Ejemplo-02/Readme.md
@@ -1,27 +1,85 @@
+[`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Ejemplo 01`
 
-agrega el programa que se desarrollara con backticks> [agrega la sesion con backticks]
+---
 
-## Titulo del Ejemplo
+## Ejemplo 2: Heredando propiedades
 
-### OBJETIVO
+### Objetivo
 
-- Lo que esperamos que el alumno aprenda
+Crear constructores para instanciar objetos y heredar propiedades entre constructores.
 
-#### REQUISITOS
+#### Requisitos
 
-1. Lo necesario para desarrollar el ejemplo o el Reto
+En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`:
 
-#### DESARROLLO
+```html
+<html>
+  <head>
+    <script type="text/javascript" src="./ejemplos-sesion-5.js"></script>
+  </head>
+</html>
+```
 
-Agrega las instrucciones generales del ejemplo o reto
+Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-5.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados.
 
-<details>
 
-        <summary>Solucion</summary>
-        <p> Agrega aqui la solucion</p>
-        <p>Recuerda! escribe cada paso para desarrollar la solución del ejemplo o reto </p>
-</details>
+#### Desarrollo
 
-Agrega una imagen dentro del ejemplo o reto para dar una mejor experiencia al alumno (Es forzoso que agregages al menos una) ![imagen](https://picsum.photos/200/300)
+Ya vimos cómo podemos instanciar objetos a partir del mismo constructor.
 
+```javascript
+var Person = function(name) {
+  this.name = name;
+}
 
+var john = new Person('John');
+```
+
+En ocasiones necesitamos que un constructor tenga las propiedades de otro.
+
+```javascript
+var Developer = function(skills, yearsOfExperience) {
+	this.skills = skills;
+	this.yearsOfExperience = yearsOfExperience;
+}
+```
+
+Con este constructor `Developer` podemos instanciar múltiples objetos que tendran las propiedades `skils` y `yearsOfExperience`. Pero también necesitamos la propiedad `name` del constructor `Person`, pues un desarrollador también es una persona que tiene nombre. Para esto usamos el método `call()` el cual ejecuta el constructor padre.
+
+```javascript
+var Person = function(name) {
+  this.name = name;
+}
+
+var Developer = function(name, skills, yearsOfExperience) {
+	Person.call(this, name);
+
+	this.skills = skills;
+	this.yearsOfExperience = yearsOfExperience;
+}
+```
+
+Decimos que el constructor `Developer` es hijo del constructor `Person` porque queremos que `Developer` herede la propiedad `name` de `Person`.
+
+`Person.call(this, name);` llama al constructor padre y retorna un objeto con todas sus propiedades. `this` en este contexto está haciendo referencia a `Developer`.
+
+```javascript
+var Person = function(name) {
+  this.name = name;
+}
+
+var Developer = function(name, skills, yearsOfExperience) {
+	Person.call(this, name);
+
+	this.skills = skills;
+	this.yearsOfExperience = yearsOfExperience;
+}
+
+var john = new Developer('John', 'JavaScript', 10);
+
+console.log( john );
+```
+
+De esta forma creamos un objeto `john` que es una instancia de `Developer`. Es importante tomar en cuenta que `john` no es una instancia de `Person` aunque tenga sus mismas propiedades, estas sólo fueron prestadas o heredadas durante la creación del objeto.
+
+![Inheritance](./assets/inheritance.png)
diff --git a/Sesion-05/Ejemplo-02/assets/inheritance.png b/Sesion-05/Ejemplo-02/assets/inheritance.png
diff --git a/Sesion-05/Readme.md b/Sesion-05/Readme.md
@@ -5,7 +5,7 @@
 
 ## Objetivos
 
-Construir clases con el objetivo de controlar el instanciamiento de su código.
+Crear constructores a partir de los cuales se puedan instanciar múltiples objetos.
 
 ---
 
@@ -19,6 +19,10 @@ Construir clases con el objetivo de controlar el instanciamiento de su código.
 
 - **[Herencia](#herencia)**
 
+	- [Ejemplo 2: Heredando propiedades](./Ejemplo-02)
+
+- **[Prototype](#prototype)**
+
 ---
 
 ## Paradigma de programación
@@ -64,7 +68,7 @@ a objetos, también incorpora capacidades de programación funcional.
 
 ---
 
-## Programación Orientada a Objetos
+## Programación orientada a objetos
 
 También conocido como OOP por sus siglas en inglés (Object Oriented Programming), es un paradigma imperativo que hace fuerte uso de las propiedades y métodos de los objetos. Múltiples objetos interactuan entre ellos para construir aplicaciones complejas. Permite estructurar las aplicaciones en módulos, una buena forma de organizar y mantener limpio el código.
 
@@ -104,18 +108,32 @@ Hay una mejor forma de hacer esto. Imagina una plantilla o un template a partir
 
 ![Constructor](./assets/constructor.png)
 
-Este es un objeto `Person` que podemos utilzar como plantilla para crear varios objetos que representen personas. En otros lenguajes de programación a esto se le conoce como clase, en JavaScript le llamamos `Constructor` o `Prototype`.
+Este es un objeto `Person` que podemos utilzar como plantilla para crear varios objetos que representen personas. En otros lenguajes de programación a esto se le conoce como clase, en JavaScript le llamamos `Constructor`.
 
 ![Instances](./assets/instances.png)
 
 De esta forma podemos crear los objetos que queramos a partir de la plantilla. En este ejemplo decimos que `john`, `mark` y `jane` son instancias del constructor `Person`. Todas las instancias tienen las mismas propiedades y métodos del constructor.
 
 #### [Ejemplo 1: Function constructor](./Ejemplo-01)
 
-### Herencia
+---
+
+## Herencia
 
 En términos simples la herencia es cuando un objeto está basado en otro objeto, es decir, un objeto puede acceder a las propiedades y métodos de otro objeto.
 
 ![Inheritance](./assets/inheritance.png)
 
 El constructor `Developer` tiene propiedades y métodos únicos cómo skills que domina, años de experiencia y el skill de su preferencia. Como `Developer` también es una persona, es decir, tambíen tiene nombre, edad y un empleo, el constructor `Developer` puede heredar del constructor `Person`, teniendo acceso a las mismas propiedades y métodos.
+
+#### [Ejemplo 2: Heredando propiedades](./Ejemplo-02)
+
+---
+
+## Prototype
+
+En JavaScript la herencia es posible gracias a una propiedad con la que cuentan todos los objetos llamada `Prototype`. Si queremos que las instancias hereden un método lo podemos colocar en el `Prototype` del constructor. Veamos un ejemplo con el constructo `Person` y la instancia `john` con la que hemos trabajado anteriormente.
+
+![Prototype Chain](./assets/prototype-chain.png)
+
+Como `john` es una instancia de `Person`, este tiene acceso al método `calculateAge()` aunque no se encuentre dentro del prototype de `john`. Cuando llamamos a un método, JavaScript busca primero en el prototype del objeto, si no lo encuentra busca en el prototype del constructor con el que fue instanciado, y así sucesivamente hasta llegar al constructor `Object`, del cuál se instancian todos los objetos en JavaScript. A esto se le conoce como **prototype chain**.
diff --git a/Sesion-05/assets/prototype-chain.png b/Sesion-05/assets/prototype-chain.png