1-OBJETOS EN JAVASCRIPT

 Objetos de la vida real

En la vida real, los objetos son cosas como: casas, autos, personas, animales o cualquier otro tema.

A continuación se muestra un ejemplo de objeto de automóvil :




Propiedades del objeto

Un coche real tiene propiedades como el peso y el color:

coche.nombre = Fiat, coche.modelo = 500, coche.peso = 850kg, coche.color = blanco.

Los objetos de automóvil tienen las mismas propiedades , pero los valores difieren de un automóvil a otro.

Métodos de objeto

Un coche real tiene métodos como arrancar y parar:

coche.arranque(), coche.conducción(), coche.freno(), coche.parada().

Los objetos de automóvil tienen los mismos métodos , pero éstos se ejecutan en momentos diferentes .

Variables de JavaScript

Las variables de JavaScript son contenedores de valores de datos.

Este código asigna un valor simple (Fiat) a una variable llamada coche:

https://www.w3schools.com/js/js_objects.asp


let car = "Fiat";


Objetos de JavaScript

Los objetos también son variables, pero pueden contener muchos valores.

Este código asigna muchos valores (Fiat, 500, blanco) a un objeto llamado coche:

const car = {type:"Fiat", model:"500", color:"white"};

Definición de objeto de JavaScript

Es una práctica común declarar objetos con la palabra clave const .



Cómo definir un objeto JavaScript
Uso de un objeto literal
Usando la newpalabra clave
Uso de un constructor de objetos


Literal de objeto de JavaScript

Un objeto literal es una lista de pares nombre:valor dentro de llaves {} .


{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}


Este ejemplo crea un objeto JavaScript vacío y luego agrega 4 propiedades:


// Create an Object
const person = {};

// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Usando la nueva palabra clave

Este ejemplo crea un nuevo objeto JavaScript usando new Object()y luego agrega 4 propiedades:

// Create an Object
const person = new Object();

// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Acceder a las propiedades de los objetos

Puede acceder a las propiedades del objeto de dos maneras:

objectName.propertyName

objectName["propertyName"]

Métodos de objetos de JavaScript

Los métodos son acciones que se pueden realizar sobre objetos.

Los métodos son definiciones de funciones almacenadas como valores de propiedad .

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

En el ejemplo anterior, thisse refiere al objeto persona :

this.firstName significa la propiedad firstName de la persona .

this.lastName significa la propiedad lastName de la persona .


En JavaScript, los objetos son el rey.

Si entiendes los objetos, entiendes JavaScript.

Los objetos son contenedores de propiedades y métodos .

Las propiedades se denominan Valores .

Los métodos son funciones almacenadas como propiedades .

Las propiedades pueden ser valores primitivos, funciones o incluso otros objetos.


En JavaScript, casi "todo" es un objeto.

  • Los objetos son objetos
  • Las matemáticas son objetos
  • Las funciones son objetos
  • Las fechas son objetos
  • Las matrices son objetos
  • Los mapas son objetos
  • Los conjuntos son objetos

Todos los valores de JavaScript, excepto los primitivos, son objetos.


Los objetos de JavaScript son mutables

Los objetos son mutables: se accede a ellos por referencia, no por valor.

Si persona es un objeto, la siguiente declaración no creará una copia de persona:

const x = person;

El objeto x no es una copia de la persona. El objeto x es una persona.

El objeto x y el objeto persona comparten la misma dirección de memoria.

Cualquier cambio en x también cambiará la persona:

//Create an Object
const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}

// Create a copy
const x = person;

// Change Age in both
x.age = 10;

Métodos para definir objetos JavaScript

  • Uso de un objeto literal
  • Usando la newpalabra clave
  • Uso de un constructor de objetos
  • UsandoObject.assign()
  • UsandoObject.create()
  • UsandoObject.fromEntries()
Cree un objeto JavaScript vacío utilizando {}y agregue 4 propiedades:

// Create an Object
const person = {};

// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Cree un objeto JavaScript vacío utilizando new Object()y agregue 4 propiedades:

// Create an Object
const person = new Object();

// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Funciones constructoras de objetos

A veces necesitamos crear muchos objetos del mismo tipo .

Para crear un tipo de objeto utilizamos una función constructora de objetos .

Se considera una buena práctica nombrar las funciones constructoras con la primera letra mayúscula.


<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Object Constructors</h1>


<p id="demo"></p>


<script>

// Constructor Function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}


// Create a Person object

const myFather = new Person("John", "Doe", 50, "blue");


// Display age

document.getElementById("demo").innerHTML =

"My father is " + myFather.age + "."; 

</script>


</body>

</html>


En la función constructora, thisno tiene valor.


El valor de thisse convertirá en el nuevo objeto cuando se cree un nuevo objeto.


Ahora podemos usar new Person() para crear muchos nuevos objetos Persona:


const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
const mySister = new Person("Anna", "Rally", 18, "green");

const mySelf = new Person("Johnny", "Rally", 22, "green");

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Object Constructors</h1>


<p id="demo"></p>


<script>


// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}


// Create two Person objects

const myFather = new Person("John", "Doe", 50, "blue");

const myMother = new Person("Sally", "Rally", 48, "green");


// Display age

document.getElementById("demo").innerHTML =

"My father is " + myFather.age + ". My mother is " + myMother.age + "."; 


</script>


</body>

</html>


¡Por supuesto! Estás observando dos formas diferentes de crear y trabajar con objetos en JavaScript. Ambas son válidas, pero tienen diferentes usos y propósitos dependiendo de lo que necesites hacer. Vamos a analizarlas:


const person = { firstName: "John", lastName: "Doe", id: 5566, fullName: function() { return this.firstName + " " + this.lastName; } };


Características:

  1. Definición simple: Usas llaves {}para definir las propiedades y métodos directamente.
  2. Útil para datos únicos: Es ideal cuando necesitas crear un solo objeto con propiedades específicas y no planeas reutilizar su estructura.
  3. No reutilizable: Si necesitas otro objeto similar, tienes que definirlo desde cero o copiar el objeto existente.
  4. Fácil de leer y usar: Perfecto para objetos con un alcance limitado.

Ejemplo de uso:

Si solo necesitas un objeto para representar a una persona específica, esta forma es sencilla y suficiente.



Segunda forma: Constructor de objetos



var personaje = function (x, y, nombre) {

    this.x = 0;

    this.y = 0;

    this.nombre = nombre;


    this.abajo = function () {

        this.y += 10;

    };


    this.hablar = function () {

        console.log('hola amigo , me llamo: ' + this.nombre);

    };

};


var personaje1 = new personaje(10, 100, 'luis');

var personaje2 = new personaje(30, 300, 'maria');

Características:

  1. Uso de funciones constructoras: Aquí define una plantilla para crear múltiples objetos con las mismas propiedades y métodos.
  2. Reutilizable: Puedes crear tantos objetos como quieras usando new personaje(...).
  3. Utiliza el operador new: Este operador crea un nuevo objeto vacío, lo vincula a thisdentro de la función constructora, y devuelve el objeto.
  4. Ideal para instancias similares: Cuando necesitas trabajar con varios objetos que comparten características comunes.

Ejemplo de uso:

Si estás programando un juego con múltiples personajes (como en tu ejemplo), esta forma permite crear personajes similares, cada uno con sus propios valores y comportamientos.


Recomendación

  • Usa objetos literales si solo necesitas trabajar con un objeto específico y no necesitas crear varios similares.
  • Usa constructores de objetos (o clases, que son una forma más moderna) cuando necesitas trabajar con múltiples instancias similares.

















https://www.w3schools.com/js/js_objects.asp

Comentarios

Publicar un comentario

Entradas populares de este blog

1-Teclas

Imagen
En este codigo implementamos tres funciones para capturar los eventos del teclado. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Ejemplo de Keypress.js </title> </head> <body>     <script src = "https://cdn.jsdelivr.net/npm/keypress.js@2.1.5/keypress.js" ></script>     <script>         // Configuración del teclado         var configTeclado = { prevent_repeat : true };         var eventoTeclado = new window . keypress . Listener ( this , configTeclado );         // Funciones asociadas a las combinaciones         function pulsaA () {             console . log ( 'has pulsado a' );         } ...
Leer más

2-canvas

Imagen
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la ...
Leer más

3-1-Personajes

Imagen
 El código está diseñado para dibujar personajes en un lienzo ( canvas ), pero actualmente no tienen movimiento porque no se está actualizando la posición de los personajes en cada frame. Solución: Hacer que los personajes se muevan Para que los personajes se muevan, debes modificar sus coordenadas ( x o y ) dentro de la función principal() en cada iteración del bucle que setInterval ejecuta. Esto se logra simplemente alterando las propiedades this.x o this.y de los objetos creados con la función personaje . <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>             </head> <body onload = " inicializa ()" >     <canvas id = "canvas...
Leer más