SlideShare una empresa de Scribd logo
Programación orientada a objetos (OOP) con JavascriptClases vs prototipos JS es basado en prototípos. Un prototípo es un objeto abstracto, capaz de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (numeros, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos. Entonces, en vez de programar una clase, para estar orientados a objetos en JS definimos un prototípo. Las variables dentro de este serán las propiedades, y las funciones serán los métodos: [Objeto = Prototípo]{      [ Propiedad = Variable ]      [ Método = Funcion ]  }
Creación del objeto La creación de un objeto se hace con una función, que será la constructora, y a la vez la que identifique el objeto. Hay dos formas de definir la función constructora: Definir una función o definir una variable cuyo contenido sea una función. Puede parecer redundante, lo es. Veamos ambas formas: Definir una función functionGato( parametros ) {       // Codigo   }; Definir una variable cuyo contenido sea una función. var Gato = function (parametros) {     /* Codigo*/  }
Propiedades del objeto Las propiedades del objeto se definen en forma de variables. Estas variables deben estar situadas dentro de la función constructora, marcadas con "this", para poder ser accesadas como parte del objeto. Las variables reciben parámetros que se envían al crear una nueva instancia del objeto. Por ejemplo: var Gato = function (nombre, color, edad) {  		    this.nombre = nombre;      this.color = color;     		    this.edad = edad;  	} Usando un objeto vamos a crear un gato nuevo, y a asignarle las propiedades: var Michi = new Gato("Michifu", "azul", 2); Si queremos comprobar alguna de las propiedades de nuestro objeto lo haríamos así:	 Variable_que_define_el_objeto (punto) propiedad_deseada. Por lo tanto: alert("El gato es de color "+Michi.color); 	Lo que nos da el resultado: "El gato es de color azul";
Métodos Un método es una función dentro del objeto. Hay varios formas de crear un método nuevo: Extendiendo el prototipo, creando una variable tipo función, o vinculando una función externa al objeto. Método 1: Vinculación externa Con este método declaramos que una de las propiedades, llamará a una función externa: 	[...]  this.comer = comerExterna;  	[...]  functioncomerExterna() {      		alert("El gato "+this.nombre+" se comió un ratón"); } 	 [...]  Michi.comer();  	[ Salida = "El gato Michifu se comió un ratón" ] Método 2: Extensión del prototipo Como los objetos están compuestos por prototipos en JavaScript, nosotros podemos aumentarle métodos al prototipo del objeto directamente, de la siguiente manera: 	//[ No tocamos la funcion constructora ]  Gato.prototype.comer = function() {      alert("El gato "+this.nombre+" se comió un ratón"); } 	 //[...] Michi.comer(); 	 //[ Salida = "El gato Michifu se comió un ratón" ] 
Método 3: Definición en la función constructora Con este método, asignamos una propiedad como función dentro de la constructora: //[...]  	this.comer = function() {    		alert("El gato "+this.nombre+" se comió un ratón");  	}  	//[...]  	Michi.comer();  	//[ Salida = "El gato Michifu se comió un ratón" ]  Nótese que en los tres métodos, es posible pasar parámetros a la función de la manera normal en que cualquier función trabaja. Además, en cualquiera de los métodos, this se refiere al objeto (en este caso Gato).
Herencia La herencia de métodos / propiedades. En JavaScript lo podemos lograr mediante los prototipos. Ahora, crearemos una raza de gato, la raza Siamés. Entonces creemos dos constructoras apartes para cada una, y hagamos que siamés herede de gato: var Gato = function () {  	    	this.ojos = 2;      this.piernas = 4;}  varSiames = function () {      this.color = "blanco";      this.color_ojos = "azul"; }	  //Como vemos, ambos tienen propiedades distintas. Ahora, heredemos:  Siames.prototype = new Gato();  	//Eso hace que se copie el prototipo de Gato y se añada al de Siames. Probemos : varCatboy = new Siames();  alert(Catboy.ojos);  	//Retorna 2! ^_^  alert(Catboy.color);  	//Retorna "blanco", asi que conserva sus propiedades 
Métodos y propiedades privadas Los métodos y funciones eran totalmente públicos: Modificables y legibles desde cualquier parte. Como "privatizar" variables: var Gato = function (nombre) { this.nombre = nombre;        	//Creamos una variable privada sin asignarle "this" a esta:       	var frecuencia = "moderada";  	// Creamos un método privado en muchos aspectos definiendo una 	función normal          function irAlBanio(frecuencia) {          		alert("El gato va al baño con frecuencia "+frecuencia);      		} irAlBano(frecuencia); } var Michin = new Gato("Michifu"); El código anterior crea la variable privada "frecuencia", y la función privada "irAlBanio". Para comprobar que la variable sea privada ejecutemos : 	alert(Michin.frecuencia), lo que devuelve: undefined
Sin embargo, aun podemos usar esas variables o funciones tanto en la función constructora, simplemente son funciones que nos permiten leer las propiedades: var Gato = function (nombre) {      this.nombre = nombre;      		//Creamos una variable privada sin asignarle "this" a esta:      		var frecuencia = "moderada";      		// Creamos un método privado en muchos aspectos definiendo 		una funcion  normal:      function irAlBano(frecuencia) {          			alert("El gato va al baño con frecuencia 					"+frecuencia); 		}      //Es aquí donde accedo a mi propiedad privada: this.leerFrec = function() {          			irAlBano(frecuencia);      		}  	}  var Michin = new Gato("Michifu"); 	 Michin.leerFrec();  	//Nos retorna "El gato va al baño con frecuencia moderada" ;)
Extensión de objetos nativos mediante el prototipo Como todos los objetos de JavaScript tienen prototipo, podemos añadir utilidades a nuestros objetos de siempre. Por ejemplo añadiendo una función a Array: Array.prototype.coincidencias = function(palabra){  		//array es nuestra nueva propiedad, que le añadimos a nuestra función coincidencias      		 coincidencias = 0; 		for (i=0; i<this.length; i++) {          			if (this[i] == palabra){              				coincidencias++;          			}      		}      		alert("Se encontraron "+coincidencias+" coincidencia(s) de la 			palabra"); } 	// Podemos usar el array siguiente, (inicializamos con una lista inicializadora): clabbers = Array("Freddie", "Mx", "Neo_JP", "Zarzamora", "Ramm", "Fael");  	// O este: clabbers = Array("Freddie", "Mx", "Neo_JP", "Zarzamora", "Mx", "Mx");  	//Y luego: clabbers.coincidencias("Mx");  	//Entonces la función nos notificará cuantas veces esta una palabra en un array.

Más contenido relacionado

La actualidad más candente

Jquery 2
Jquery 2Jquery 2
Jyoc java-cap08 principios poo
Jyoc java-cap08 principios pooJyoc java-cap08 principios poo
Jyoc java-cap08 principios poo
Jyoc X
 
La propiedad prototype en la programación orientada a objetos con JavaScript
La propiedad prototype en la programación orientada a objetos con JavaScriptLa propiedad prototype en la programación orientada a objetos con JavaScript
La propiedad prototype en la programación orientada a objetos con JavaScript
Francisco Javier Arce Anguiano
 
Unidad 3: Herencia Ejercicio 1
Unidad 3: Herencia Ejercicio 1Unidad 3: Herencia Ejercicio 1
Unidad 3: Herencia Ejercicio 1
Fabiola Valerio Ramirez
 
02 curso poo Clase - Objeto
02 curso poo Clase - Objeto02 curso poo Clase - Objeto
02 curso poo Clase - Objeto
Andres Bedoya Tobon
 
03 curso poo Valores por defecto - constructores
03 curso poo Valores por defecto - constructores03 curso poo Valores por defecto - constructores
03 curso poo Valores por defecto - constructores
Andres Bedoya Tobon
 
POO
POOPOO
Macros en excel [106 paginas en español]
Macros en excel [106 paginas   en español]Macros en excel [106 paginas   en español]
Macros en excel [106 paginas en español]
CESAR ROGELIO TEJADA CASTAÑEDA
 
Programar Macros
Programar MacrosProgramar Macros
Programar Macros
joajz
 
Herencia clase
Herencia claseHerencia clase
Herencia clase
Jose Antonio
 
Atributos
AtributosAtributos
Atributos
kayrambal
 
Elementos de una clase
Elementos de una claseElementos de una clase
Elementos de una clase
Isaias Toledo
 
Introducción a la Programaciónen Java
Introducción a la Programaciónen JavaIntroducción a la Programaciónen Java
Introducción a la Programaciónen Java
santosisidrorivera
 
Semana 4 Javascript Estructura de Datos y ciclo FOR
Semana 4   Javascript Estructura de Datos y ciclo FORSemana 4   Javascript Estructura de Datos y ciclo FOR
Semana 4 Javascript Estructura de Datos y ciclo FOR
Richard Eliseo Mendoza Gafaro
 
04 curso poo Herencia
04 curso poo Herencia04 curso poo Herencia
04 curso poo Herencia
Andres Bedoya Tobon
 
05. Creando e implementando objetos y métodos
05. Creando e implementando objetos y métodos05. Creando e implementando objetos y métodos
05. Creando e implementando objetos y métodos
Danae Aguilar Guzmán
 

La actualidad más candente (16)

Jquery 2
Jquery 2Jquery 2
Jquery 2
 
Jyoc java-cap08 principios poo
Jyoc java-cap08 principios pooJyoc java-cap08 principios poo
Jyoc java-cap08 principios poo
 
La propiedad prototype en la programación orientada a objetos con JavaScript
La propiedad prototype en la programación orientada a objetos con JavaScriptLa propiedad prototype en la programación orientada a objetos con JavaScript
La propiedad prototype en la programación orientada a objetos con JavaScript
 
Unidad 3: Herencia Ejercicio 1
Unidad 3: Herencia Ejercicio 1Unidad 3: Herencia Ejercicio 1
Unidad 3: Herencia Ejercicio 1
 
02 curso poo Clase - Objeto
02 curso poo Clase - Objeto02 curso poo Clase - Objeto
02 curso poo Clase - Objeto
 
03 curso poo Valores por defecto - constructores
03 curso poo Valores por defecto - constructores03 curso poo Valores por defecto - constructores
03 curso poo Valores por defecto - constructores
 
POO
POOPOO
POO
 
Macros en excel [106 paginas en español]
Macros en excel [106 paginas   en español]Macros en excel [106 paginas   en español]
Macros en excel [106 paginas en español]
 
Programar Macros
Programar MacrosProgramar Macros
Programar Macros
 
Herencia clase
Herencia claseHerencia clase
Herencia clase
 
Atributos
AtributosAtributos
Atributos
 
Elementos de una clase
Elementos de una claseElementos de una clase
Elementos de una clase
 
Introducción a la Programaciónen Java
Introducción a la Programaciónen JavaIntroducción a la Programaciónen Java
Introducción a la Programaciónen Java
 
Semana 4 Javascript Estructura de Datos y ciclo FOR
Semana 4   Javascript Estructura de Datos y ciclo FORSemana 4   Javascript Estructura de Datos y ciclo FOR
Semana 4 Javascript Estructura de Datos y ciclo FOR
 
04 curso poo Herencia
04 curso poo Herencia04 curso poo Herencia
04 curso poo Herencia
 
05. Creando e implementando objetos y métodos
05. Creando e implementando objetos y métodos05. Creando e implementando objetos y métodos
05. Creando e implementando objetos y métodos
 

Destacado

Curso javascript
Curso javascriptCurso javascript
Curso javascript
Lener Romero
 
Javascript OOP
Javascript OOPJavascript OOP
Javascript OOP
Gabriel Chertok
 
Javascript
JavascriptJavascript
Javascript
Daniel Grippo
 
Javascript objetos
Javascript objetosJavascript objetos
Javascript objetos
Daniel Grippo
 
Apuntes: Arreglos y objetos en JavaScript
Apuntes: Arreglos y objetos en JavaScriptApuntes: Arreglos y objetos en JavaScript
Apuntes: Arreglos y objetos en JavaScript
Francisco Javier Arce Anguiano
 
Java script(diapositivas)
Java script(diapositivas) Java script(diapositivas)
Java script(diapositivas)
Roberto Mejia
 
Html5, css3, java script
Html5, css3, java scriptHtml5, css3, java script
Html5, css3, java script
Jonathan Serrano
 
Identificar el dispositivo para desarrollar en iOS
Identificar el dispositivo para desarrollar en iOSIdentificar el dispositivo para desarrollar en iOS
Identificar el dispositivo para desarrollar en iOS
Francisco Javier Arce Anguiano
 

Destacado (8)

Curso javascript
Curso javascriptCurso javascript
Curso javascript
 
Javascript OOP
Javascript OOPJavascript OOP
Javascript OOP
 
Javascript
JavascriptJavascript
Javascript
 
Javascript objetos
Javascript objetosJavascript objetos
Javascript objetos
 
Apuntes: Arreglos y objetos en JavaScript
Apuntes: Arreglos y objetos en JavaScriptApuntes: Arreglos y objetos en JavaScript
Apuntes: Arreglos y objetos en JavaScript
 
Java script(diapositivas)
Java script(diapositivas) Java script(diapositivas)
Java script(diapositivas)
 
Html5, css3, java script
Html5, css3, java scriptHtml5, css3, java script
Html5, css3, java script
 
Identificar el dispositivo para desarrollar en iOS
Identificar el dispositivo para desarrollar en iOSIdentificar el dispositivo para desarrollar en iOS
Identificar el dispositivo para desarrollar en iOS
 

Similar a OOP-JS pjs

Intro aplicaciones web con php
Intro aplicaciones web con phpIntro aplicaciones web con php
Intro aplicaciones web con php
Fer Nando
 
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
Marcelino Ortiz
 
Introducción a la Programación con Javascript. Clase 3
Introducción a la Programación con Javascript. Clase 3Introducción a la Programación con Javascript. Clase 3
Introducción a la Programación con Javascript. Clase 3
xjordi
 
4 manejo de_metodos
4 manejo de_metodos4 manejo de_metodos
4 manejo de_metodos
ElielMauricioEscobar
 
Encapsulamiento
EncapsulamientoEncapsulamiento
Encapsulamiento
luis0145
 
Guia poo
Guia pooGuia poo
Guia poo
Sergio Barbar
 
3 desarollo manejo datos capitulo 4 -01 introduccion colecciones
3 desarollo manejo datos capitulo 4 -01 introduccion colecciones3 desarollo manejo datos capitulo 4 -01 introduccion colecciones
3 desarollo manejo datos capitulo 4 -01 introduccion colecciones
luis freddy
 
Jquery parte 1
Jquery parte 1Jquery parte 1
Jquery parte 1
Cesar Eduardo Suarez T
 
Todo Javascript para canibales
Todo Javascript para canibalesTodo Javascript para canibales
Todo Javascript para canibales
briant pati
 
Java Script de canibaless
Java Script de canibalessJava Script de canibaless
Java Script de canibaless
briant pati
 
Javascript de Canibales
Javascript de CanibalesJavascript de Canibales
Javascript de Canibales
briant pati
 
Ejercicio de automatizacion IntelliJ+reporte.docx
Ejercicio de automatizacion IntelliJ+reporte.docxEjercicio de automatizacion IntelliJ+reporte.docx
Ejercicio de automatizacion IntelliJ+reporte.docx
ssuser2e6b96
 
3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos
3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos
3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos
luis freddy
 
3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones
3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones
3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones
luis freddy
 
programacion orientada a objetos
programacion orientada a objetosprogramacion orientada a objetos
programacion orientada a objetos
jent46
 
Java paratodos1
Java paratodos1Java paratodos1
Java paratodos1
alvriveros
 
Lab herencia
Lab herenciaLab herencia
Modulo ii de_java[1]
Modulo ii de_java[1]Modulo ii de_java[1]
Modulo ii de_java[1]
david florentino
 
JQuery con ejemplos cortos
JQuery con ejemplos cortosJQuery con ejemplos cortos
JQuery con ejemplos cortos
José Ricardo Tillero Giménez
 
Lenguaje de Programacion - Java
Lenguaje de Programacion - JavaLenguaje de Programacion - Java
Lenguaje de Programacion - Java
zousbabastre
 

Similar a OOP-JS pjs (20)

Intro aplicaciones web con php
Intro aplicaciones web con phpIntro aplicaciones web con php
Intro aplicaciones web con php
 
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
 
Introducción a la Programación con Javascript. Clase 3
Introducción a la Programación con Javascript. Clase 3Introducción a la Programación con Javascript. Clase 3
Introducción a la Programación con Javascript. Clase 3
 
4 manejo de_metodos
4 manejo de_metodos4 manejo de_metodos
4 manejo de_metodos
 
Encapsulamiento
EncapsulamientoEncapsulamiento
Encapsulamiento
 
Guia poo
Guia pooGuia poo
Guia poo
 
3 desarollo manejo datos capitulo 4 -01 introduccion colecciones
3 desarollo manejo datos capitulo 4 -01 introduccion colecciones3 desarollo manejo datos capitulo 4 -01 introduccion colecciones
3 desarollo manejo datos capitulo 4 -01 introduccion colecciones
 
Jquery parte 1
Jquery parte 1Jquery parte 1
Jquery parte 1
 
Todo Javascript para canibales
Todo Javascript para canibalesTodo Javascript para canibales
Todo Javascript para canibales
 
Java Script de canibaless
Java Script de canibalessJava Script de canibaless
Java Script de canibaless
 
Javascript de Canibales
Javascript de CanibalesJavascript de Canibales
Javascript de Canibales
 
Ejercicio de automatizacion IntelliJ+reporte.docx
Ejercicio de automatizacion IntelliJ+reporte.docxEjercicio de automatizacion IntelliJ+reporte.docx
Ejercicio de automatizacion IntelliJ+reporte.docx
 
3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos
3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos
3 desarollo manejo datos capitulo 3 -02 busqueda arreglo objetos
 
3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones
3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones
3 desarollo manejo datos capitulo 4 -02 aplicaciones colecciones
 
programacion orientada a objetos
programacion orientada a objetosprogramacion orientada a objetos
programacion orientada a objetos
 
Java paratodos1
Java paratodos1Java paratodos1
Java paratodos1
 
Lab herencia
Lab herenciaLab herencia
Lab herencia
 
Modulo ii de_java[1]
Modulo ii de_java[1]Modulo ii de_java[1]
Modulo ii de_java[1]
 
JQuery con ejemplos cortos
JQuery con ejemplos cortosJQuery con ejemplos cortos
JQuery con ejemplos cortos
 
Lenguaje de Programacion - Java
Lenguaje de Programacion - JavaLenguaje de Programacion - Java
Lenguaje de Programacion - Java
 

Último

Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.
https://gramadal.wordpress.com/
 
ELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdf
ELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdfELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdf
ELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdf
DaliaAndrade1
 
explorando los secretos de la fotosíntesis
explorando los secretos de la fotosíntesisexplorando los secretos de la fotosíntesis
explorando los secretos de la fotosíntesis
CristianRodrguez692429
 
REGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptx
REGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptxREGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptx
REGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptx
RiosMartin
 
La filosofía presocrática y los filosofos más relvantes del periodo.
La filosofía presocrática y los filosofos más relvantes del periodo.La filosofía presocrática y los filosofos más relvantes del periodo.
La filosofía presocrática y los filosofos más relvantes del periodo.
DobbieElfo
 
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdfAPUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
VeronicaCabrera50
 
Presentación de proyecto en acuarela moderna verde.pdf
Presentación de proyecto en acuarela moderna verde.pdfPresentación de proyecto en acuarela moderna verde.pdf
Presentación de proyecto en acuarela moderna verde.pdf
LuanaJaime1
 
2.- DIARIO -MANIFESTACIONES-LECTURA...pdf
2.- DIARIO -MANIFESTACIONES-LECTURA...pdf2.- DIARIO -MANIFESTACIONES-LECTURA...pdf
2.- DIARIO -MANIFESTACIONES-LECTURA...pdf
MiNeyi1
 
Mi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste BlancoMi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste Blanco
Ruth Noemí Soto Villegas
 
Presentación simple corporativa degradado en violeta blanco.pdf
Presentación simple corporativa degradado en violeta blanco.pdfPresentación simple corporativa degradado en violeta blanco.pdf
Presentación simple corporativa degradado en violeta blanco.pdf
eleandroth
 
Qué entra en el examen de Geografía.pptx
Qué entra en el examen de Geografía.pptxQué entra en el examen de Geografía.pptx
Qué entra en el examen de Geografía.pptx
saradocente
 
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍACINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
Fernández Gorka
 
Los Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres VivosLos Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres Vivos
karlafreire0608
 
5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf
5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf
5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf
manuelhinojosa1950
 
Power Point: El conflicto inminente (Bosquejo)
Power Point: El conflicto inminente (Bosquejo)Power Point: El conflicto inminente (Bosquejo)
Power Point: El conflicto inminente (Bosquejo)
https://gramadal.wordpress.com/
 
Cuadernillo De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...
Cuadernillo  De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...Cuadernillo  De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...
Cuadernillo De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...
JesusSanchez136180
 
Compartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdf
Compartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdfCompartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdf
Compartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdf
JimmyDeveloperWebAnd
 
Presentación sector la arenita_paijan pptx
Presentación sector la arenita_paijan pptxPresentación sector la arenita_paijan pptx
Presentación sector la arenita_paijan pptx
Aracely Natalia Lopez Talavera
 
c3.hu3.p3.p4.Los seres humanos y no humanos.pptx
c3.hu3.p3.p4.Los seres humanos y no humanos.pptxc3.hu3.p3.p4.Los seres humanos y no humanos.pptx
c3.hu3.p3.p4.Los seres humanos y no humanos.pptx
Martín Ramírez
 
ROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
ROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLAROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
ROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
JAVIER SOLIS NOYOLA
 

Último (20)

Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.
 
ELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdf
ELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdfELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdf
ELEMENTOS DE LA COMPRENSION ORAL-ESCUCHA ACTIVA.pdf
 
explorando los secretos de la fotosíntesis
explorando los secretos de la fotosíntesisexplorando los secretos de la fotosíntesis
explorando los secretos de la fotosíntesis
 
REGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptx
REGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptxREGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptx
REGLAMENTO DE FALTAS Y SANCIONES DEL MAGISTERIO 2024.pptx
 
La filosofía presocrática y los filosofos más relvantes del periodo.
La filosofía presocrática y los filosofos más relvantes del periodo.La filosofía presocrática y los filosofos más relvantes del periodo.
La filosofía presocrática y los filosofos más relvantes del periodo.
 
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdfAPUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
 
Presentación de proyecto en acuarela moderna verde.pdf
Presentación de proyecto en acuarela moderna verde.pdfPresentación de proyecto en acuarela moderna verde.pdf
Presentación de proyecto en acuarela moderna verde.pdf
 
2.- DIARIO -MANIFESTACIONES-LECTURA...pdf
2.- DIARIO -MANIFESTACIONES-LECTURA...pdf2.- DIARIO -MANIFESTACIONES-LECTURA...pdf
2.- DIARIO -MANIFESTACIONES-LECTURA...pdf
 
Mi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste BlancoMi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste Blanco
 
Presentación simple corporativa degradado en violeta blanco.pdf
Presentación simple corporativa degradado en violeta blanco.pdfPresentación simple corporativa degradado en violeta blanco.pdf
Presentación simple corporativa degradado en violeta blanco.pdf
 
Qué entra en el examen de Geografía.pptx
Qué entra en el examen de Geografía.pptxQué entra en el examen de Geografía.pptx
Qué entra en el examen de Geografía.pptx
 
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍACINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
 
Los Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres VivosLos Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres Vivos
 
5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf
5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf
5° T3 EDITABLE EVALUACIÓN DARUKEL 2023-2024.pdf
 
Power Point: El conflicto inminente (Bosquejo)
Power Point: El conflicto inminente (Bosquejo)Power Point: El conflicto inminente (Bosquejo)
Power Point: El conflicto inminente (Bosquejo)
 
Cuadernillo De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...
Cuadernillo  De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...Cuadernillo  De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...
Cuadernillo De Quimica 3 De Secundaria - Trimestre III - Alumno - Omar Chiqu...
 
Compartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdf
Compartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdfCompartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdf
Compartir p4s.co Pitch Hackathon Template Plantilla final.pptx-2.pdf
 
Presentación sector la arenita_paijan pptx
Presentación sector la arenita_paijan pptxPresentación sector la arenita_paijan pptx
Presentación sector la arenita_paijan pptx
 
c3.hu3.p3.p4.Los seres humanos y no humanos.pptx
c3.hu3.p3.p4.Los seres humanos y no humanos.pptxc3.hu3.p3.p4.Los seres humanos y no humanos.pptx
c3.hu3.p3.p4.Los seres humanos y no humanos.pptx
 
ROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
ROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLAROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
ROMPECABEZAS DE COMPETENCIAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
 

OOP-JS pjs

  • 1. Programación orientada a objetos (OOP) con JavascriptClases vs prototipos JS es basado en prototípos. Un prototípo es un objeto abstracto, capaz de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (numeros, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos. Entonces, en vez de programar una clase, para estar orientados a objetos en JS definimos un prototípo. Las variables dentro de este serán las propiedades, y las funciones serán los métodos: [Objeto = Prototípo]{      [ Propiedad = Variable ]      [ Método = Funcion ] }
  • 2. Creación del objeto La creación de un objeto se hace con una función, que será la constructora, y a la vez la que identifique el objeto. Hay dos formas de definir la función constructora: Definir una función o definir una variable cuyo contenido sea una función. Puede parecer redundante, lo es. Veamos ambas formas: Definir una función functionGato( parametros ) {       // Codigo  }; Definir una variable cuyo contenido sea una función. var Gato = function (parametros) {     /* Codigo*/ }
  • 3. Propiedades del objeto Las propiedades del objeto se definen en forma de variables. Estas variables deben estar situadas dentro de la función constructora, marcadas con "this", para poder ser accesadas como parte del objeto. Las variables reciben parámetros que se envían al crear una nueva instancia del objeto. Por ejemplo: var Gato = function (nombre, color, edad) {     this.nombre = nombre;      this.color = color;      this.edad = edad; } Usando un objeto vamos a crear un gato nuevo, y a asignarle las propiedades: var Michi = new Gato("Michifu", "azul", 2); Si queremos comprobar alguna de las propiedades de nuestro objeto lo haríamos así: Variable_que_define_el_objeto (punto) propiedad_deseada. Por lo tanto: alert("El gato es de color "+Michi.color); Lo que nos da el resultado: "El gato es de color azul";
  • 4. Métodos Un método es una función dentro del objeto. Hay varios formas de crear un método nuevo: Extendiendo el prototipo, creando una variable tipo función, o vinculando una función externa al objeto. Método 1: Vinculación externa Con este método declaramos que una de las propiedades, llamará a una función externa: [...] this.comer = comerExterna; [...] functioncomerExterna() {       alert("El gato "+this.nombre+" se comió un ratón"); } [...] Michi.comer(); [ Salida = "El gato Michifu se comió un ratón" ] Método 2: Extensión del prototipo Como los objetos están compuestos por prototipos en JavaScript, nosotros podemos aumentarle métodos al prototipo del objeto directamente, de la siguiente manera: //[ No tocamos la funcion constructora ] Gato.prototype.comer = function() {      alert("El gato "+this.nombre+" se comió un ratón"); } //[...] Michi.comer(); //[ Salida = "El gato Michifu se comió un ratón" ] 
  • 5. Método 3: Definición en la función constructora Con este método, asignamos una propiedad como función dentro de la constructora: //[...] this.comer = function() {    alert("El gato "+this.nombre+" se comió un ratón"); } //[...] Michi.comer(); //[ Salida = "El gato Michifu se comió un ratón" ]  Nótese que en los tres métodos, es posible pasar parámetros a la función de la manera normal en que cualquier función trabaja. Además, en cualquiera de los métodos, this se refiere al objeto (en este caso Gato).
  • 6. Herencia La herencia de métodos / propiedades. En JavaScript lo podemos lograr mediante los prototipos. Ahora, crearemos una raza de gato, la raza Siamés. Entonces creemos dos constructoras apartes para cada una, y hagamos que siamés herede de gato: var Gato = function () {      this.ojos = 2;      this.piernas = 4;} varSiames = function () {      this.color = "blanco";      this.color_ojos = "azul"; } //Como vemos, ambos tienen propiedades distintas. Ahora, heredemos: Siames.prototype = new Gato(); //Eso hace que se copie el prototipo de Gato y se añada al de Siames. Probemos : varCatboy = new Siames(); alert(Catboy.ojos); //Retorna 2! ^_^ alert(Catboy.color); //Retorna "blanco", asi que conserva sus propiedades 
  • 7. Métodos y propiedades privadas Los métodos y funciones eran totalmente públicos: Modificables y legibles desde cualquier parte. Como "privatizar" variables: var Gato = function (nombre) { this.nombre = nombre;        //Creamos una variable privada sin asignarle "this" a esta:      var frecuencia = "moderada"; // Creamos un método privado en muchos aspectos definiendo una función normal          function irAlBanio(frecuencia) {          alert("El gato va al baño con frecuencia "+frecuencia);      } irAlBano(frecuencia); } var Michin = new Gato("Michifu"); El código anterior crea la variable privada "frecuencia", y la función privada "irAlBanio". Para comprobar que la variable sea privada ejecutemos : alert(Michin.frecuencia), lo que devuelve: undefined
  • 8. Sin embargo, aun podemos usar esas variables o funciones tanto en la función constructora, simplemente son funciones que nos permiten leer las propiedades: var Gato = function (nombre) {      this.nombre = nombre;      //Creamos una variable privada sin asignarle "this" a esta:      var frecuencia = "moderada";      // Creamos un método privado en muchos aspectos definiendo una funcion normal:      function irAlBano(frecuencia) {          alert("El gato va al baño con frecuencia "+frecuencia); }      //Es aquí donde accedo a mi propiedad privada: this.leerFrec = function() {          irAlBano(frecuencia);      } } var Michin = new Gato("Michifu"); Michin.leerFrec(); //Nos retorna "El gato va al baño con frecuencia moderada" ;)
  • 9. Extensión de objetos nativos mediante el prototipo Como todos los objetos de JavaScript tienen prototipo, podemos añadir utilidades a nuestros objetos de siempre. Por ejemplo añadiendo una función a Array: Array.prototype.coincidencias = function(palabra){ //array es nuestra nueva propiedad, que le añadimos a nuestra función coincidencias      coincidencias = 0; for (i=0; i<this.length; i++) {          if (this[i] == palabra){              coincidencias++;          }      }      alert("Se encontraron "+coincidencias+" coincidencia(s) de la palabra"); } // Podemos usar el array siguiente, (inicializamos con una lista inicializadora): clabbers = Array("Freddie", "Mx", "Neo_JP", "Zarzamora", "Ramm", "Fael"); // O este: clabbers = Array("Freddie", "Mx", "Neo_JP", "Zarzamora", "Mx", "Mx"); //Y luego: clabbers.coincidencias("Mx"); //Entonces la función nos notificará cuantas veces esta una palabra en un array.