Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objetos Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de funciones Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


Constructores de objetos de JavaScript


Ejemplo

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

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


Tipos de objetos (Blueprints) (Clases)

Los ejemplos de los capítulos anteriores son limitados. Solo crean objetos individuales.

A veces necesitamos un " modelo " para crear muchos objetos del mismo "tipo".

La forma de crear un "tipo de objeto" es usar una función constructora de objetos .

En el ejemplo anterior, function Person()es una función constructora de objetos.

Los objetos del mismo tipo se crean llamando a la función constructora con la newpalabra clave:

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


La esta palabra clave

En JavaScript, lo que se llama thises el objeto que "posee" el código.

El valor de this, cuando se usa en un objeto, es el objeto mismo.

En un constructor la función thisno tiene valor. Es un sustituto del nuevo objeto. El valor de thisse convertirá en el nuevo objeto cuando se cree un nuevo objeto.

Tenga en cuenta que thisno es una variable. Es una palabra clave. No puede cambiar el valor de this.


Agregar una propiedad a un objeto

Agregar una nueva propiedad a un objeto existente es fácil:

Ejemplo

myFather.nationality = "English";

La propiedad se agregará a myFather. No a mi madre. (No se opone a ninguna otra persona).


Agregar un método a un objeto

Agregar un nuevo método a un objeto existente es fácil:

Ejemplo

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

El método se agregará a myFather. No a mi madre. (No se opone a ninguna otra persona).


Agregar una propiedad a un constructor

No puede agregar una nueva propiedad a un constructor de objetos de la misma manera que agrega una nueva propiedad a un objeto existente:

Ejemplo

Person.nationality = "English";

Para agregar una nueva propiedad a un constructor, debe agregarla a la función del constructor:

Ejemplo

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

De esta forma, las propiedades de los objetos pueden tener valores predeterminados.


Agregar un método a un constructor

Su función constructora también puede definir métodos:

Ejemplo

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

No puede agregar un nuevo método a un constructor de objetos de la misma manera que agrega un nuevo método a un objeto existente.

Agregar métodos a un constructor de objetos debe hacerse dentro de la función constructora:

Ejemplo

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

La función changeName() asigna el valor de name a la propiedad lastName de la persona.

Ahora puedes probar:

myMother.changeName("Doe");

JavaScript sabe de qué persona estás hablando al "sustituir" esto con myMother .


Constructores de JavaScript incorporados

JavaScript tiene constructores incorporados para objetos nativos:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

El Math()objeto no está en la lista. Mathes un objeto global. La newpalabra clave no se puede utilizar en Math.


¿Sabías?

Como puede ver arriba, JavaScript tiene versiones de objetos de los tipos de datos primitivos String, Numbery Boolean. Pero no hay razón para crear objetos complejos. Los valores primitivos son mucho más rápidos:

Use literales de cadena ""en lugar de new String().

Use literales numéricos 50en lugar de new Number().

Use literales booleanos true / falseen lugar de new Boolean().

Use literales de objetos {}en lugar de new Object().

Use literales de matriz []en lugar de new Array().

Utilice literales de patrón /()/en lugar de new RegExp().

Utilice expresiones de función () {}en lugar de new Function().

Ejemplo

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

Objetos de cadena

Normalmente, las cadenas se crean como primitivas: firstName = "John"

Pero las cadenas también se pueden crear como objetos usando la newpalabra clave:
firstName = new String("John")

Aprenda por qué las cadenas no deben crearse como objeto en el capítulo Cadenas JS .


Objetos numéricos

Normalmente, los números se crean como primitivos: x = 30

Pero los números también se pueden crear como objetos usando la newpalabra clave:
x = new Number(30)

Aprenda por qué los números no deben crearse como objeto en el capítulo Números JS .


Objetos booleanos

Normalmente, los booleanos se crean como primitivos: x = false

Pero los booleanos también se pueden crear como objetos usando la newpalabra clave:
x = new Boolean(false)

Aprenda por qué los booleanos no deben crearse como objeto en el capítulo JS Booleans .