En el lenguaje de programación JavaScript casi “todo” puede ser visto como un objeto. Números, cadenas, arreglos, funciones, datos booleanos, fechas y expresiones regulares son percibidas como objetos o pueden ser tratados como tal. Para entender mejor el concepto de objeto imaginemos que acabamos de comprar un móvil nuevo (el móvil es el objeto). Tiene propiedades como color, peso, tamaño, tamaño de pantalla y marca; también tiene métodos como llamar, tomar una foto, encendido y apagado. Ahora, expliquémoslo a nivel de programación:
- Los objetos son una instancia de una clase
- Las propiedades son una característica, dada en un valor; ya sea tipo String (cadena), matemática, etc
- Los métodos son una capacidad; y para realizarlos utilizamos una función - function
📌 Revisa nuestra nueva escuela de JS y nunca pares de aprender javascript 🚀
En JavaScript encontramos 3 maneras de crear objetos:
- La primera: crear un objeto literal
<script>
var movil = {Marca:"Alcatel", Peso:"5 onzas", pantalla: "5 pulgadas", Color:"Negro"};
<script>
Un objeto literal es la manera más simple de crear un objeto. Se enmarca dentro de corchetes y se describe en pares de (clave: valor).
- La segunda: crear un objeto usando la palabra new
<script>
var movil = new Object();
movil.Marca="Alcatel";
movil.Peso="5 onzas";
movil.Pantalla="5 pulgadas";
movil.Color="Negro";
<script>
El operador newcrea una instancia de un tipo de objeto a partir de una función constructora. Recordemos que en JavaScript un constructor es una función.
- La tercera: crear un objeto haciendo una función constructor
<script>
function movil(marca, peso, pantalla, color) {
this.Marca = marca;
this.Peso = peso;
this.Pantalla = pantalla;
this.Color = color;
}
var compra = new movil("Alcatel", "5 onzas", "5 pulgadas", "Negro");
<script>
Una función constructora crea una copia de un objeto específico; en otros lenguajes de programación son conocidas como clases. En JavaScript encontramos dos maneras diferentes de acceder a las propiedades de nuestro objeto:
- Marca;
- movil[“Marca”];
Su sintaxis es distinta, pero realizan la misma acción. Ejemplo:
<script>
var movil = {
Marca: "Alcatel",
Peso : "5 onzas",
pantalla: "5 pulgadas"
};
document.getElementById("elementoprueba").innerHTML = movil.Marca + " --- " + movil["Marca"];
<script>
Como resultado obtendremos: Alcatel — Alcatel Ahora vamos a agregar métodos. Existen diversas maneras de realizar este proceso, pero tomaremos de ejemplo la manera más simple: utilizando la palabra this. Se puede utilizar en un método para referirnos al objeto actual.
<script>
var movil = {
Marca: "Alcatel",
encendido : function(c) {
return "Mi movil marca" +" "+ this.Marca +" "+ "esta encendido";
}};
document.getElementById("Elementoprueba").innerHTML = movil.encendido();
Como resultado obtendremos:
<strong>Mi móvil marca Alcatel está encendido</strong> En el <strong>curso profesional de Front-end</strong> estamos viendo más a fondo el uso de objetos, propiedades y métodos en Javascript. <a href="https://platzi.com/cursos/frontend-online/">¿Ya te registraste?</a>.<script>
