Diferencia entre revisiones de «Objetos en JavaScript»

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda
(Objetos nativos en Javascript)
(Objetos nativos en Javascript)
Línea 200: Línea 200:
 
== Objetos nativos en Javascript ==
 
== Objetos nativos en Javascript ==
 
ECMA-262 define los objetos nativos como "cualquier objeto proporcionado por una implementación de ECMAScript independiente del entorno anfitrión". Así, tenemos las siguientes clases: '''Object''', '''Function''', '''Array''', '''String''', '''Boolean''', '''Number''', '''Date''' y '''RegExp'''.
 
ECMA-262 define los objetos nativos como "cualquier objeto proporcionado por una implementación de ECMAScript independiente del entorno anfitrión". Así, tenemos las siguientes clases: '''Object''', '''Function''', '''Array''', '''String''', '''Boolean''', '''Number''', '''Date''' y '''RegExp'''.
Algunos ya los vimos y, ahora, vamos a echar ahora una ojeada a algunos más de estos objetos nativos de JavaScript, ésto es, aquellos que JavaScript nos da, listos para su utilización en nuestra aplicación.
 
        ◦ Clase Array
 
En ECMAScript, al contrario que en Java, existe una clase Array. Podemos crear un objeto Array del siguiente modo:
 
var aValores = new Array()
 
  
Otro modo de definirlo sería:
+
Algunos ya los vimos y, ahora, vamos a echar ahora una ojeada a algunos más de estos objetos nativos de JavaScript, ésto es, aquellos que JavaScript nos da, listos para su utilización en nuestra aplicación.
 +
 
 +
=== Clase Array ===
 +
En ECMAScript, al contrario que en Java, existe una clase ''Array''. Podemos crear un objeto ''Array'' del siguiente modo:
 +
<source lang="javascript">
 +
var aValores = new Array()
 +
</source>
 +
Otro modo de definirlo sería:
 +
<source lang="javascript">
 
var aValores = [];
 
var aValores = [];
 +
</source>
 +
Sabiendo con antelación el número de elementos del array:
  
Sabiendo con antelación el número de elementos del array:
 
 
var aValores = new Array(10)
 
var aValores = new Array(10)
  

Revisión del 16:28 25 oct 2020

Los objetos son estructuras de información capaces de contener propiedades y métodos. ECMA-262 define objeto como "una colección sin ordenar de propiedades que contienen un valor primitivo, un objeto o una función".

Todo objeto se define mediante una clase, que puede definirse como "la receta del objeto". Cuando un programa utiliza una clase para crear un objeto, el objeto resultante se denomina instancia de la clase.

  • Objetos nativos
Son cualquier objeto proporcionado por una implementación de JavaScript independiente del entorno anfitrión. Son los siguientes: object, function, array, string, boolean, number, date, regexp, error, evalerror, rangeerror, referenceerror, syntaxerror, typeerror, urierror.
  • Objetos incorporados
Son cualquier objeto proporcionado por una implementación de JavaScript, independientemente del entorno anfitrión, que está presente al iniciarse la ejecución de un programa de JavaScript. Son los siguientes: global, math.
  • Objetos anfitrión

Cualquier objeto que no sea nativo se considera anfitrión. Todos los objetos BOM y DOM se consideran objetos anfitrión y se analizarán en un apartado posterior.

Definir clases y objetos

La posibilidad de utilizar objetos predefinidos es sólo una parte de cualquier lenguaje orientado a objetos. Las verdaderas prestaciones se obtienen al crear clases y objetos propios para usos específicos.

  • La clase
En JavaScript las clases son funciones, para comprobarlo veremos luego un ejemplo donde definimos una clase "Coche" utilizando la expresión function y la expresión class.
  • El objeto
Para crear un nuevo objeto se utiliza la declaración new, asignando el resultado (que es de tipo obj) a una variable para tener acceso más tarde. En el siguiente ejemplo se define, como ya se dijo, una clase llamada "Coche" y una instancia llamada "coche1".
  • El constructor
El constructor es llamado en el momento de la creación de la instancia (el momento en que se crea la instancia del objeto). El constructor es un método de la clase. En JavaScript no hay necesidad de definir explícitamente un método constructor. Cada acción declarada en la clase es ejecutada en el momento de la creación de la instancia.
El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso.
  • Las propiedades
Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades. Las propiedades deben establecerse a la propiedad prototipo de la clase, para que la herencia funcione correctamente.
Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada this, que se refiere al objeto actual. El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis: NombreDeLaInstancia.Propiedad (desde dentro de la clase la sintaxis es this.Propiedad).
En el siguiente ejemplo definimos varias propiedades de la clase Coche.
  • Los métodos
Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones. Llamar a un método es similar a acceder a una propiedad, pero se agrega () al final del nombre del método, pero, posiblemente vaya acompañado de argumentos.
En el siguiente ejemplo se define y utiliza el método mostrarColor() para la clase Coche, en él se define una clase Coche con varias propiedades y un método. Luego se crea un objeto coche1 a partir de una instancia de ella.

Definimos la clase "Coche" con la expresión function

	function Coche(sColor, iPuertas, iKmpl) {
		this.color = sColor; 			//Color coche
		this.puertas = iPuertas; 		//Número de puertas coche
		this.kmpl = iKmpl; 			//Kms recorridos por litro
		this.conductores = new Array(); //Lista conductores coche
	}

	Coche.prototype.mostrarColor = function() {
		alert(this.color);
	}

	//Inicializar un coche de prueba
	var coche1 = new Coche("rojo", 4, 20);
	coche1.conductores = ["Andrea", "Ana", "Miguel"];
	//Leemos una propiedad
	console.log("El coche es de color " + coche1.color);
	console.log("Lo conducen : " + coche1.conductores.join(", "));
	//Llamamos al método
	coche1.mostrarColor();

Definimos la clase “Coche” con la expresión class

Las clases de javascript, introducidas en ECMAScript 2015, son una mejora sintáctica sobre la herencia basada en prototipos de JavaScript. La sintaxis de las clases no introduce un nuevo modelo de herencia orientada a objetos en JavaScript. Las clases de JavaScript proveen una sintaxis mucho más clara y simple para crear objetos y definir la herencia.

Las clases son "funciones especiales", teniendo la sintaxis de una clase dos componentes: expresiones de clases y declaraciones de clases.

Para declarar una clase, se utiliza la palabra reservada class y un nombre para la clase, que en el siguiente ejemplo será "Coche".

Una importante diferencia entre las declaraciones de funciones y las declaraciones de clases es que las declaraciones de funciones son alojadas (hoisted) y las declaraciones de clases no lo son. Es decir, en primer lugar se necesita declarar la clase y luego acceder a ella, de otro modo el ejemplo de código siguiente arrojará un ReferenceError:

	class Coche {
		constructor (sColor, iPuertas, iKmpl) {
		  this.color = sColor; //Color coche
		  this.puertas = iPuertas; //Número de puertas coche
		  this.kmpl = iKmpl; 	//Kms recorridos por litro consumido
		  this.conductores = new Array(); //Lista conductores coche
		}
		//Método
		mostrarColor() {
		  alert(this.color);
		}
	}

	//Inicializar un coche
	var coche1 = new Coche("rojo", 4, 20);
	coche1.conductores = ["Andrea", "Ana", "Miguel"];
	//Leemos una propiedad
	console.log("El coche es de color " + coche1.color);
	console.log("Lo conducen : " + coche1.conductores.join(", "));
	//Llamamos al método
	coche1.mostrarColor();

Anular referencias a objetos

En JavaScript no se puede acceder a la representación física del objeto, sólo a referencias del mismo. Saber también que JavaScript cuenta con una rutina de recolección de elementos sin utilizar, por lo que no es necesario destruir específicamente los objetos para liberar memoria. Cuando no quedan referencias a un objeto, se dice que se han anulado las referencias al mismo. Luego, al ejecutar el recolector de elementos sin utilizar, todos los objetos con referencias anuladas se destruyen.

Pueden anularse las referencias a objetos de forma manual, si se establecen todas en null. Es interesante realizar esta acción con objetos sin utilizar para así liberar memoria.

var miObjeto = new Object;
//Al terminar de trabajar con el objeto
miObjeto = null;

Los getters y los setters

Podemos ver un nuevo ejemplo donde se define la clase Vec que representa un vector en dos dimensiones. Esta clase tiene dos propiedades x e y de tipo float. También tendrá dos métodos, sumar y restar, que pide otro vector como parámetro y devuelve un nuevo vector que es "suma" o "resta" de los dos. Por último, también debe tener una tercera propiedad, pero de tipo "getter" que calcule la longitud del vector (distancia hasta el punto (0,0)) == sqrt(x*x + y*y)

    class Vec {
      constructor (fX, fY) {
        this.x = fX;
        this.y = fY;
      }
      //Propiedad getter
      get longitud() {
        return Math.sqrt(this.x*this.x + this.y*this.y);
      }
      //Métodos
      //Sumar Vectores
      sumarVec(otroVec) {
        var sumaX = this.x + otroVec.x;
        var sumaY = this.y + otroVec.y;
        var vectorSuma = new Vec(sumaX, sumaY);
        return vectorSuma;
      }

      //Restar Vectores
      restarVec(otroVec) {
        var restaX = this.x - otroVec.x;
        var restaY = this.y - otroVec.y;
        var vectorResta = new Vec(restaX, restaY);
        return vectorResta;
      }
    }
    //Comprobamos que todo va bien
    var vector1 = new Vec(1,1);
    var vector2 = new Vec(10,10);
    console.log(vector1);
	//longitud es una propiedad no una función
      console.log(vector1.longitud); 

    var vSuma = vector1.sumarVec(vector2);
    console.log(vSuma);
    console.log(vSuma.longitud);

    var vResta = vector1.restarVec(vector2);
    console.log(vResta);
    console.log(vResta.longitud);

Herencia

La herencia es una manera de crear una clase como una versión especializada de una o más clases (JavaScript sólo permite herencia simple). La clase "especializada" comúnmente se llama hija o secundaria, y la otra clase se le llama padre o primaria. En JavaScript la herencia se logra mediante la asignación de una instancia de la clase primaria a la clase secundaria, y luego se hace la especialización.

Veamos un ejemplo donde se definen formas geométricas.

Existen dos tipos de formas: las elipses (con forma redonda) y los polígonos (con un número concreto de lados). Los círculos son un tipo de elipse con un centro; los triángulos, rectángulos y pentágonos son tipos de polígonos con distintos lados. Un cuadrado es un rectángulo con sus cuatro lados iguales. De este modo podemos definir una relación de herencia perfecta.
El diagrama UML podría ser el siguiente:
En este ejemplo, sólo nos centraremos en la creación de la clase Poligono y de las subclases Triangulo y Rectangulo.
La clase Poligono tendrá la propiedad lados y el método getArea().
//Definición de la clase Poligono
class Poligono {
	constructor(iLados) {
		this.lados = iLados; }
	//Métodos
	getArea() { return 0; }
}
Vemos que el método getArea() devuelve 0 porque es simplemente un marcador de posición de los métodos de las posteriores subclases que se vayan a crear.
Ahora creamos la subclase Triangulo. Esta clase tiene tres lados, de forma que esta clase tiene que reemplazar la propiedad lados de la clase Poligono y establecerla en 3. También es necesario reemplazar getArea() para que utilice la fórmula del área del triángulo, que es "1/2 x base x altura".
El método obtendrá esos dos datos de las dos propiedades base y altura.
Así, el código de la clase Triangulo será el siguiente:
//Definición de la clase Triangulo subclase de Poligono
class Triangulo extends Poligono {
	constructor(iBase, iAltura, iLados) {
		super(iLados);
		this.lados = 3;
		this.base = iBase;
		this.altura = iAltura; }
	getArea() { return 0.5 * this.base * this.altura; }
}
De igual modo, definimos el código de la clase Rectangulo:
//Definición de la clase Rectangulo
class Rectangulo extends Poligono {
    constructor (iLargo, iAncho, iLados) {
        super (iLados);
        this.lados = 4;
        this.largo = iLargo;
        this.ancho = iAncho; }
    getArea() { return this.largo * this.ancho; }
}

Por fin, comprobamos que el código está bien escrito:

var triangulo1 = new Triangulo(12, 4);
var rectangulo1 = new Rectangulo(22, 10);

console.log(triangulo1.getArea());
console.log(triangulo1.lados);
console.log(rectangulo1.getArea());
console.log(rectangulo1.lados);

Objetos nativos en Javascript

ECMA-262 define los objetos nativos como "cualquier objeto proporcionado por una implementación de ECMAScript independiente del entorno anfitrión". Así, tenemos las siguientes clases: Object, Function, Array, String, Boolean, Number, Date y RegExp.

Algunos ya los vimos y, ahora, vamos a echar ahora una ojeada a algunos más de estos objetos nativos de JavaScript, ésto es, aquellos que JavaScript nos da, listos para su utilización en nuestra aplicación.

Clase Array

En ECMAScript, al contrario que en Java, existe una clase Array. Podemos crear un objeto Array del siguiente modo:

var aValores = new Array()

Otro modo de definirlo sería:

	var aValores = [];

Sabiendo con antelación el número de elementos del array:

var aValores = new Array(10)

Para acceder a cada una de las posiciones del array, lo haremos utilizando corchetes, tanto para escribir: var aColores = new Array(); var aColores[0] = "rojo"; var aColores[1] = "verde"; var aColores[2] = "azul";

como para leer el dato: console.log(aColores[1]); //verde

Si queremos crear el array ya con una cantidad de valores conocidos: var aColores = new Array("rojo", "verde", "azul");

Y, claro está, también: var aColores = ["rojo", "verde", "azul"];

Para descubrir el tamaño total del array, lo haremos con su propiedad length: console.log(aColores.length); //3

Los arrays pueden tener un total de 4.294.967.295 elementos (¿sufientes?).

Podemos crear una cadena a partir del array, utilizando para ello el método join() y, como parámetro, el separador que nos interese: var aColores = ["rojo", "verde", "azul"]; sColores = aColores.join(","); //rojo, verde, azul


También el objeto String cuenta con un método para convertirse en Array. sColores = "rojo, verde, azul"; var aColores = sColores.split(",");

El objeto Array también tiene el método concat(), que nos permite añadir, al final, el contenido de un array en otro. Y el método slice(), para extraer varios elementos del array. Para añadir y eliminar elementos del final del array, existen los métodos push() y pop(). Para manipular el "primer elemento", en vez de el último, también posee la clase Array el método shift(), que lo elimina y, unshift() que añade un elemento en esa primera posición. Para manipular el orden de los elementos, la clase Array tiene dos métodos. El método reverse(), que invierte la posición de todos los elementos. Y, el método sort() que los organiza en modo ascendente como si fuesen "cadenas de texto". Sin duda, el método más complicado de la clase Array es splice(), que nos permite manipular elementos "en el medio" del array: //Eliminar los dos primeros elementos unArray.splice(0,2); //Añadir esas cadenas en la posición 2 unArray.splice(2, 0, "rojo", "verde"); //Eliminar un elemento en la posición 2 y añadir dos cadenas ahí unArray.splice(2, 1, "rojo", "verde");

El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada. var aColores = ["rojo", "verde", "azul", "violeta"]; var result = aColores.filter(color => color.length > 4); console.log(result); //["verde","violeta"]

El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. var numeros = [1, 5, 10, 15]; var doublesNumeros = numeros.map(function(x) {

     return x * 2;
});
console.log(numeros); //[1, 5, 10, 15]
console.log(doublesNumeros); //[2, 10, 20, 30]

El método reduce() ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor. //Ejemplo que suma todos los elementos de un array var numeros = [1, 5, 10, 15]; var total = numeros.reduce(function(a, b){ return a + b; }, 0); //El último parámetro "0" será el valor inicial... console.log(total); // 31


Volver