Programación orientada a

objetos
con JavaScript
Programación orientada a objetos
● Simula 67
● Smalltalk
● C++
● Java
● C#
● Objective-C
● JavaScript
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.

Mensaje

Objeto 1 Objeto 2
Mensaje
OOP con JavaScript
Cada objeto puede verse como una pequeña
“máquina independiente” con un papel o
responsabilidad definida.
Objeto

Objeto Objeto

Objeto
Clases, objetos e
instancias
OOP con JavaScript
OOP con JavaScript
Clase: Define las características del Objeto.
TANQUE

Balas: Number
Vidas: Number
Posición: Object

Disparar
Retroceder
Explotar
OOP con JavaScript
Objeto: Una instancia de una Clase.
TANQUE

Balas: Number
Vidas: Number
Posición: Object
INSTANCIAS
Disparar
Retroceder
Explotar

CLASE
Elementos de un clase
OOP con JavaScript
OOP con JavaScript
Propiedad: Una característica del Objeto,
como el número de balas de un tanque.
TANQUE

Balas: Number
Vidas: Number
Posición: Object

Disparar
Retroceder
Explotar
OOP con JavaScript
Método: Una capacidad del Objeto, como
disparar().

TANQUE

Balas: Number
Vidas: Number
Posición: Object

Disparar
Retroceder
Explotar
OOP con JavaScript
Constructor: Es un método llamado en el
momento de la creación de instancias.
Principios de la OOP
OOP con JavaScript
OOP con JavaScript
Herencia: Una Clase puede heredar
características de otra Clase.
Armamento

Avion Tanque
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: Number
Vidas: Number
Posición: Object

Disparar
Retroceder
Explotar
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.
OOP con JavaScript
Polimorfismo: Diferentes Clases podrían
definir el mismo método o propiedad.
TANQUE AVION

Balas: Number Balas: Number

Vidas: Number Vidas: Number
Posición: Object Posición: Object

Disparar Disparar
Retroceder Explotar
Explotar Despegar
La propiedad prototype
OOP con JavaScript
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();

OOP con JavaScript
Para trabajar con propiedades dentro de la
clase se utiliza la palabra reservada this , que
se refiere al objeto actual.
OOP con JavaScript
El acceso (lectura o escritura) a una propiedad
desde fuera de la clase se hace con la sintaxis:

tanque1.balas = 100;
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();
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);
Programación orientada a
prototipos
OOP con JavaScript
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.
OOP con JavaScript
Este modelo también se conoce como
programación sin clases, orientada a
prototipos o basada en funciones.
 UML
OOP con JavaScript
UML
El lenguaje unificado de modelado o Unified
Modeling Language (UML) permite visualizar
las clases y las relaciones entre ellas.
TANQUE

Balas: Number
Vidas: Number
Posición: Object

Disparar
Retroceder
Explotar
UML
En JavaScript, el constructor y el nombre de la
clase son los mismos.
Luego se enumeran las propiedades y
posteriormente los métodos.
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.
Links
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/class
https://en.wikipedia.org/wiki/ECMAScript
Links
https://developer.mozilla.
org/es/docs/Web/JavaScript/Guide/Details_of_the_Objec
t_Model
https://developer.mozilla.
org/es/docs/Web/JavaScript/Introducción_a_JavaScript_o
rientado_a_objetos
https://developer.mozilla.
org/es/docs/Web/JavaScript/Guide/Funciones
Programación orientada a
objetos
con JavaScript
La palabra reservada this
Con this indicamos que estamos trabajando
“con este” objeto, sin necesidad de
nombrarlo.
Constructores
OOP con JavaScript
Constructores
En JavaScript todo el código que se encuentre
dentro de una función se ejecuta
inmediatemente y se puede considerar un
“constructor”. O sea, no hay constructor
propiamente dicho.
 UML
OOP con JavaScript
UML
El lenguaje unificado de modelado o Unified
Modeling Language (UML) permite visualizar
las clases y las relaciones entre ellas.
UML
En JavaScript, el constructor y el nombre de l
clase son los mismos.
Luego se enumeran las propiedades y
posteriormente los métodos.
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.
Modificadores de acceso
OOP con JavaScript
Modificadores de acceso
En JavaScript, en específico en ECMAScript 5 y
anteriores, no hay modificadores de acceso,
por lo que todas las propiedades y métodos
son públicos.
Modificadores de acceso
En JavaScript las funciones creadas dentro de
la “clase” o mejor llamado métodos, son
consideradas como otra variable.
Referencias a clases
externas
OOP con JavaScript
Referencias externas
En JavaScript, podemos definir un método
dentro de una “clase” y tener el código fuera
de la misma, es decir, escribir el código en
una función externa.
Prototyping
OOP con JavaScript
Prototyping
En JavaScript podemos añadir propiedades y
métodos a una “clase” por medio del comando
prototype.
A la acción de añadir propiedades o métodos a
una clase se le conoce como “prototyping”.
Prototyping
Al usar prototype, no se duplica el código en
las diferentes instancias creadas, pero todos
pueden utilizar estos recursos añadidos.
Prototyping
En JavaScript, todas las funciones tienen un
propiedad llamada prototype, que es a su vez
un objeto.
Prototyping
Se puede utilizar prototype solo después de
haber creado la función de la clase, no antes.
Prototyping
Es una práctica común crear las propiedades
dentro de la función de la clase, y añadir los
métodos con prototype.
Prototyping
SI nosotros modificamos un método haciendo
referencia a una instancia, sólo será
modificado o sobreescrito (overwriting) esa
instancia, y no todas las demás instancias.
Propiedades y métodos
estáticos
OOP con JavaScript
Propiedades y métodos estáticos
Una propiedad estática no es otra cosa que
una variable añadida a la función de la clase
(sin prototype), pero por lo general se
escriben con mayúsculas.
Propiedades y métodos estáticos
Un método estático no es otra cosa que una
función añadida a la función de la clase (sin
prototype).
Propiedades y métodos estáticos
En ambos casos pueden ser llamados sin
necesidad de crear una instancia, sólo
referenciarla con el nombre de la función
clase.
Propiedades privadas
OOP con JavaScript
Propiedades privadas
Aunque JavaScript no tiene modificadores de
acceso propiamente dichos como los demás
lenguajes orientados a objetos, podemos
hacer propiedades privadas si las definimos
dentro de la función de clase con la palabra
reservada var.
Propiedades privadas
Es una buena práctica diferencias a estas
propiedades de alguna manera. Por lo general
se le antepone un guión bajo en el nombre.
Espacio de nombres o
name space
OOP con JavaScript
OOP con JavaScript
Un espacio de nombres (name space) es un
contenedor que permite asociar toda la
funcionalidad de un determinado objeto con
un nombre único.
OOP con JavaScript
En JavaScript un espacio de nombres es un
objeto que permite asociarse a métodos,
propiedades y objetos.
OOP con JavaScript
La idea de crear namespace en JavaScript es
simple: Crear un único objeto global para las
variables, métodos y funciones,
convirtiéndolos en propiedades de ese objeto.
OOP con JavaScript
El uso de los namespace permite minimizar el
conflicto de nombres con otros objetos
haciéndolos únicos dentro de nuestra
aplicación.
OOP con JavaScript
JavaScript es un lenguaje basado en prototipos
que no contiene ninguna declaración de clase,
como se encuentra, por ejemplo, en C++ o
Java.
OOP con JavaScript
En su lugar, JavaScript utiliza funciones como
clases. Definir una clase es tan fácil como
definir una función.
OOP con JavaScript
Como una buena práctica, los nombres de
espacio los escribiremos con mayúsculas.
Programación orientada a
objetos
Funciones
¿Qué es una función?
¿Qué es una función?
Una función en un conjunto de instrucciones
que se llaman o invocan bajo un nombre y
tienen un propósito definido y que puede
regresar un valor.
¿Qué es una función?
function suma(a, b) {
var c = a + b;
return c;
}
¿Qué es una función?
● función (function)
● nombre
● propiedades
● instrucciones
● return
¿Qué es una función?
Una función tiene 2 parámetros:
● arguments
● prototype

Y tiene dos métodos:

● call()
● apply()
¿Qué es una función?
function sumaNumeros() {
var i, tot = 0;
var numeros = arguments.length;
for (i = 0; i < numeros; i++) {
tot += arguments[i];
}
return tot;
}
Funciones predefinidas
Funciones predefinidas
En JavaScript tenemos funciones predefinidas
que no necesitan ninguna instancia para ser
utilizadas:
● parseInt()
● parseFloat()
● isNaN()
Funciones predefinidas
● isFinite()
● encodeURI()
● decodeURI()
● encodeURIComponent()
● decodeURIComponent()
● eval()
Funciones anónimas
Función anónima
No tiene nombre y por lo general es ejecutada
en el momento. La podemos asignar como una
variable.
Función anónima
// asignamos la función a la variable saludo
var saludo = function(hora)
{
if (hora >= 22 || hora <= 5)
document.write("Buenas noches");
else
document.write("Buenos días");
}
// llama a la función
saludo(10);
Funciones de callback
Función callback
Las funciones no son otra cosa que datos
asignados a una variable, por lo que pueden
ser copiados, borrados y llamados como
parámetros.
Funciones de callback
Una función puede ser pasada como un
parámetro.
Funciones que se
autoinvocan
Funciones que se auto invocan
Por medio de los paréntesis, podemos
autoinvocar a una función, generalmente es
una función anónima.
Podemos pasarle parámetros por medio de
paréntesis.
Funciones que se autoinvocan
(
function(){
alert('Hola, cara de bola');
}
)()
Funciones que se autoinvocan
(
function(nombre){
alert('Hola ' + nombre + '!');
}
)('Crayola')
Funciones dentro de
funciones
Funciones dentro de funciones
Se puede crear una función dentro de otra
función, pero sólo será visible dentro de ésta.
Funciones dentro de funciones
function a(numero) {
function b(entrada) {
return entrada * 2;
};
return 'Resultado ' + b(numero);
};
Funciones dentro de funciones
var a = function(numero) {
var b = function(entrada) {
return entrada * 2;
};
return 'Resultado ' + b(numero);
};
Funciones que regresan
funciones
Funciones que regresan funciones
Dentro de la sentencia return puedes ejecutar
una función anónima.
Si una función no tiene una sentencia
“return”, regresará una valor “undefined”.
Funciones que regresan funciones
function a() {
alert('Hola ');
return function(){
alert('cara de bola');
};
}
Redefinir una función
Redefinir una función
Ya que una función puede regresar otra
función, podemos utilizar la segunda función
para redefinir a la primera.
Redefinir una función
Ya que una función puede regresar otra
función, podemos utilizar la segunda función
para redefinir a la primera.
call y apply
call y apply
Ambas funciones sirven para llamar a otra
función.
En ambas, el primer parámetro debe ser el
objeto propietario.
call y apply
En el método call, los parámetros se pasan
separados por comas.
En el método apply, los parámetros se pasan
como un arreglo.
call y apply
function producto(a, b) {
return a * b;
}
var objeto = producto.call(objeto, 7, 3);
alert(objeto);
call y apply
function producto(a, b) {
return a * b;
}
var objeto = producto.apply(objeto, [7, 3]);
alert(objeto);
Programación orientada a
objetos
con JavaScript
¿Qué es un objeto?
con JavaScript
¿Qué es un objeto?
En JavaScript “casi” todo es un objeto.
Los valores primitivos son: cadenas, números y
booleanos.
Todos lo demás son objetos: arreglos,
funciones, expresiones regulares y objetos.
¿Qué es un objeto?
Los objetos son variables que contienen
variables, incluso arreglos, funciones y otros
objetos.
¿Qué es un objeto?
Existen tres maneras de crear un objeto:
● Por medio de las llaves
● Por un constructor
● Por la palabra reservada “new”
Elementos, propiedades y
eventos de un objeto
con JavaScript
Elementos, propiedades y métodos
En un arreglo se considera que tiene
“elementos”.
En un objeto decimos que contiene
“propiedades”.
Si un objeto contiene una función, se le
considera un “método”.
Elementos, propiedades y métodos
También podemos almacenar una función en
un arreglo, pero es poco común.
Para acceder a una propiedad o método de un
objeto, podemos utilizar:
● La notación punto (recomendada)
● Notación de corchetes (menos usada)
Modificar propiedades y
métodos de un objeto
con JavaScript
Alterar métodos y propiedades
Podemos iniciar con un objeto vacío y
agregarles métodos y propiedades en el
tiempo de ejecución del script.
Alterar métodos y propiedades
Borramos una propiedad con delete.
Añadimos por medio de la sintaxis punto.
La palabra reservada
“this”
con JavaScript
La palabra reservada “this”
Cuando estamos dentro de un objeto,
podemos hacer referencia a sus elementos
(propiedades o métodos) por medio de la
palabra reservada “this”.
El constructor
con JavaScript
El constructor
Podemos crear un objeto o instancia por
medio del “constructor” por medio del
operador “new”.
var tanque1 = new Tanque();
El constructor
Por convención, la primera letra de un
constructor o función de clase, va en
mayúscula.
Objetos globales
con JavaScript
Objetos globales
Todos los elementos, propiedades o métodos,
de un script, están colgados del objeto
window y se consideran como globales.
Objetos globales
Todos los elementos, propiedades o métodos,
de un script, están colgados del objeto
window y se consideran como globales.
La propiedad construct
con JavaScript
La propiedad constructor
Son las propiedades creadas dentro de la
función constructora.
El operador instaceof
con JavaScript
El operador instanceof
Con el operador instanceof podemos saber el
nombre del constructor o función de clase del
objeto.
Funciones que regresan
objetos
con JavaScript
Funciones que regresan objetos
Instead of returning the object this, which
contains the property a, the constructor
returned another object that contains the
property b. This is possible only if the return
value is an object. Otherwise, if you try to
return anything that is not an object, the
constructor will proceed with its usual
behavior and return this.
Pasar objetos a funciones
con JavaScript
Pasar objetos en funciones
Los objetos se pasan a una función por
referencia, las variables simples se pasan por
valor.
Comparación de objetos
con JavaScript
Comparación de objetos
La comparación de objetos solo será
verdadera si se comparan los objetos de un
mismo origen.
Si los objetos son exactamente iguales, pero
de diferente origen, el resultado será falso.
La igualdad estricta siempre da falso.
Comparación de objetos
La comparación de objetos solo será
verdadera si se comparan los objetos de un
mismo origen.
Si los objetos son exactamente iguales, pero
de diferente origen, el resultado será falso.
La igualdad estricta siempre da falso.
Objetos precostruidos en
JavaScript
con JavaScript
Objetos preconstruidos en JS
Data wrapper objects—Object, Array,
Function, Boolean, Number, and String.
Objetos preconstruidos en JS
Utility objects—These are Math, Date, RegExp
and can come in very handy.
Objetos preconstruidos en JS
Error objects—The generic Error object as well
as other, more specific objects that can help
your program recover its working state when
something unexpected happens.
Objetos preconstruidos en JS
To create a new empty object you can use the
literal notation or the Object() constructor
function.
Objetos preconstruidos en JS
Un objeto vacío contiene los siguientes
elementos:
o.constructor
o.toString()
o.valueOf()
Objetos preconstruidos en JS
Un arreglo o Array es otro objeto pre-
construido.
Objetos preconstruidos en JS
Una función es un objeto predefinido en JS.
Su constructor es Function()
Toda función tiene un elemento prototype que
es a su vez un objeto.
Poseen un método llamado “call()” y
“apply()”.
Una propiedad “arguments” y “callee”
Objetos preconstruidos en JS
Los valores booleanos son otro Objeto
preconstruido en JS
Programación orientada a
objetos
con JavaScript
¿Qué es el prototype?
en JavaScript
¿Qué es el prototype?
Las funciones son objetos que tienen
propiedades (arguments, prototype y
constructor) y métodos (call() y apply())
¿Qué es el prototype?
prototype es una propiedad que tiene toda
función y es de tipo objeto. En un inicio es un
objeto vacío.
¿Qué es el prototype?
Por medio de la propiedad prototype podemos
añadir métodos y propiedades a la función de
clase o constructor.
¿Qué es el prototype?
El prototipo solo se utiliza cuando utilizas a la
función como función constructora.
Añadir propiedades al
prototipo
JavaScript
Añadir propiedades al prototype
Cuando creas una función como constructora
por medio de “new”, puedes hacer referencia
al mismo por medio de “this” (la cual no es
una variable).
Añadir propiedades al prototype
A las propiedades añadidas con “this” se les
conoce como “own properties”.
A las propiedades añadidas con “prototype” se
les conoce como “prototype properties”.
Añadir propiedades al prototype

TANQUE

Own properties Prototype properties

this.balas; prototype.x;
this.vidas; prototype.y;
this.energia; prototype.angulo;
 Usar propiedades y
métodos del prototipo
JavaScript
Usar propiedades y métodos del prototipo

Como el prototipo es un objeto, cualquier

modificación la pueden visualizar todas las
instancias, incluso si fueron creadas antes de
la modificación al prototipo.
Usar propiedades y métodos del prototipo

Todo lo que se encuentre en el prototipo se

pasa “por referencia”, por lo tanto, no se
duplica en cada instancia.
En cambio en las “own properties” si se
duplican en cada instancia.
Usar propiedades y métodos del prototipo
tanque1
this.balas;
TANQUE this.vidas;
this.energia;

Own Prototype
tanque2
properties properties
this.balas;
this.balas; avanza()
this.vidas;
this.vidas; dispara()
this.energia;
this.energia; explota()

tanque3
this.balas;
this.vidas;
this.energia;
Propiedades del objeto y
propiedades del prototipo
JavaScript
Prioridades del prototipo
JS primero busca en la función la propiedad, y
si no existe la busca en el objeto prototype.
Si hay una propiedad de la función y una
propiedad en el objeto prototype, la
propiedad de la función tiene precedencia.
Prioridades del prototipo
Si eliminas la propiedad de la función (own
properties), aparecerá la propiedad prototype.
A esto se le conoce como
“cadena de prototipos”
o
“property chain”
Sobreescribir propiedades
de la función
JavaScript
Sobreescribir propiedades
Para que sepamos si la propiedad es de la
función o del prototipo, tenemos el método
hasOwnProperty().
Sobreescribir propiedades
Si borramos una propiedad de la función,
JavaScript nos regresará la propiedad del
prototipo.
Visualizar el contenido del
prototipo
JavaScript
Visualizar el contenido del prototipo
Por medio de un ciclo for...in podemos
enlistar todas las propiedades de un objeto.
Por medio de l función hasOwnProperty()
sabemos si son propiedades del objeto (true) o
del objeto prototype (false).
Visualizar el contenido del prototipo
Para saber si una variable es enumerable
(visible en el for..in) utilizamos el método
propertyIsEnumerable();
isPrototypeOf()
JavaScript
El método isPrototypeOf()
El método isPrototypeOf() nos indica si un
objeto es prototipo de otro.
Regresa un valor booleano si son prototipos o
un falso si no.
__proto__
Prototype
Todos los objetos en JavaScript tienen una
propiedad prototype que es otro objeto.
En JavaScript, los objetos heredan por medio
de la propiedad prototype.
El prototipo del objeto Object es el eslabón
más alto en la cadena de prototipos.
Prototype
Cualquier objeto hereda de Object.prototype.
La relación entre el objeto y la clase que le
hereda es “__proto__”
No es buena idea usarla porque no es
compatible (IE)
Prototype
prototype pertenece a la función constructora
__proto__ pertenece a las instancias
Un sustituto de __proto__ es Object.
getPrototypeOf()
pero sólo corre en ES5, no en ES3.
Prototype
Modificar objetos
preestablecidos
Modificar los objetos predefinidos
Podemos añadir propiedades o métodos a los
objetos propios de JS como Array, Object,
Function, etc.
Douglas Crockford
cadena de prototipos o “prototype chaining”
Links

https://www.packtpub.
com/packtlib/book/Web%
20Development/9781847194145/5