introducción a la programación orientada a objetos con javascript
TRANSCRIPT
![Page 1: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/1.jpg)
Programación orientada a objetos con JavaScript
![Page 2: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/2.jpg)
Programación orientada a objetos
● Simula 67● Smalltalk● C++● Java● C#● Objective-C● JavaScript
![Page 3: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/3.jpg)
OOP con JavaScript
En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos.
Objeto 1 Objeto 2
Mensaje
Mensaje
![Page 4: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/4.jpg)
OOP con JavaScript
Cada objeto puede verse como una pequeña “máquina independiente” con un papel o responsabilidad definida.
Objeto
Objeto
Objeto
Objeto
![Page 5: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/5.jpg)
Clases, objetos e instanciasOOP con JavaScript
![Page 6: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/6.jpg)
OOP con JavaScript
Clase: Define las características del Objeto.
TANQUE
Balas: NumberVidas: NumberPosición: Object
DispararRetrocederExplotar
![Page 7: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/7.jpg)
OOP con JavaScript
Objeto: Una instancia de una Clase.
TANQUE
Balas: NumberVidas: NumberPosición: Object
DispararRetrocederExplotar
CLASE
INSTANCIAS
![Page 8: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/8.jpg)
Elementos de un claseOOP con JavaScript
![Page 9: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/9.jpg)
OOP con JavaScript
Propiedad: Una característica del Objeto, como el número de balas de un tanque.
TANQUE
Balas: NumberVidas: NumberPosición: Object
DispararRetrocederExplotar
![Page 10: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/10.jpg)
OOP con JavaScript
Método: Una capacidad del Objeto, como disparar().
TANQUE
Balas: NumberVidas: NumberPosición: Object
DispararRetrocederExplotar
![Page 11: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/11.jpg)
OOP con JavaScript
Constructor: Es un método llamado en el momento de la creación de instancias.
![Page 12: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/12.jpg)
Principios de la OOPOOP con JavaScript
![Page 13: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/13.jpg)
OOP con JavaScript
Herencia: Una Clase puede heredar características de otra Clase.
Armamento
TanqueAvion
![Page 14: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/14.jpg)
OOP con JavaScript
Encapsulamiento: Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.
TANQUE
Balas: NumberVidas: NumberPosición: Object
DispararRetrocederExplotar
![Page 15: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/15.jpg)
OOP con JavaScript
Abstracción: La conjunción de herencia compleja, métodos, propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.
![Page 16: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/16.jpg)
OOP con JavaScript
Polimorfismo: Diferentes Clases podrían definir el mismo método o propiedad.
TANQUE
Balas: NumberVidas: NumberPosición: Object
DispararRetrocederExplotar
AVION
Balas: NumberVidas: NumberPosición: Object
DispararExplotarDespegar
![Page 17: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/17.jpg)
La propiedad prototypeOOP con JavaScript
![Page 18: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/18.jpg)
OOP con JavaScript
Las propiedades deben establecerse a la propiedad prototipo de la clase (función), para que la herencia funcione correctamente.
var tanque1 = new Tanque();
![Page 19: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/19.jpg)
OOP con JavaScript
Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada this , que se refiere al objeto actual.
![Page 20: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/20.jpg)
OOP con JavaScript
El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis:
tanque1.balas = 100;
![Page 21: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/21.jpg)
OOP con JavaScript
Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones.
instancia.metodo();
![Page 22: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/22.jpg)
OOP con JavaScript
Llamar a un método es similar a acceder a una propiedad, pero se agrega () al final del nombre del método, posiblemente con argumentos.
tanque1.avanza(10,10);
![Page 23: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/23.jpg)
Programación orientada a prototiposOOP con JavaScript
![Page 24: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/24.jpg)
OOP con JavaScript
La programación basada en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos.
![Page 25: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/25.jpg)
OOP con JavaScript
Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en funciones.
![Page 26: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/26.jpg)
UMLOOP con JavaScript
![Page 27: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/27.jpg)
UML
El lenguaje unificado de modelado o Unified Modeling Language (UML) permite visualizar las clases y las relaciones entre ellas.
TANQUE
Balas: NumberVidas: NumberPosición: Object
DispararRetrocederExplotar
![Page 28: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/28.jpg)
UML
En JavaScript, el constructor y el nombre de la clase son los mismos.Luego se enumeran las propiedades y posteriormente los métodos.
![Page 29: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/29.jpg)
UML
Aunque en JS no se definen los tipos de dato, en el UML se indica el tipo de mismo.Si el método no regresa ningún valor, se indica con :void.
![Page 30: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/30.jpg)
Links
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/classhttps://en.wikipedia.org/wiki/ECMAScript
![Page 31: Introducción a la programación orientada a objetos con JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5878a1a91a28ab42588b59d5/html5/thumbnails/31.jpg)
Links
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Modelhttps://developer.mozilla.org/es/docs/Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetoshttps://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones