Introducción a Constructor en JavaScript

El método constructor en JavaScript es un método especial utilizado para crear e inicializar objetos dentro de una clase. Esto es lo que hace un constructor en cada lenguaje de programación. Lo que diferencia al constructor de JavaScript de los demás es la libertad en términos de sintaxis. Para entenderlo mejor, simplemente abra las herramientas del desarrollador del navegador (Ctrl / Cmd + Shift + C) y vaya a la pestaña Consola en la ventana de herramientas del desarrollador.

Se ve así en Chrome

Este es el campo de juego para la mayoría de los conceptos relacionados con JavaScript. Estaríamos usando este patio de recreo a lo largo de este artículo.

Tipos de constructores en JavaScript

Hay dos tipos de constructores en JavaScript

1. Constructores incorporados

Estos son los constructores fácilmente disponibles que vienen incluidos en el entorno de ejecución. El usuario simplemente necesita invocarlos y viola, el trabajo está hecho. Ejemplos de constructores integrados son Array, Date y Object.

2. Constructores definidos por el usuario

Estos son los constructores declarados y definidos por el programador para ser utilizados en toda la aplicación. Un programador también puede definir propiedades y métodos de sus propios tipos personalizados. También se conocen como constructores personalizados. Por convención, todos los constructores de JavaScript están encerrados en oraciones. Esto es para decirle a la persona que los usa que esta función debe invocarse usando la nueva palabra clave.

¿Cómo funcionan los constructores en JavaScript?

Antes de analizar la sintaxis de los constructores de JavaScript, debemos comprender un concepto muy básico de JavaScript:

  • La clase Object resume en el contexto de este artículo, cada objeto JavaScript es creado por el constructor Object. Si el valor proporcionado al crear el objeto es nulo o indefinido, el constructor de objetos creará un objeto vacío. De lo contrario, creará un objeto del tipo definido mientras crea el objeto.
  • Cada vez que se declara un nuevo objeto del tipo de clase, la nueva palabra clave devuelve una referencia al objeto recién creado. Se accede a ese objeto usando esta palabra clave dentro del constructor para inicializar las propiedades del objeto.
  • Aunque, técnicamente, JavaScript no tiene ninguna clase, pero tiene constructores y prototipos para brindar una funcionalidad similar. En ECMAScript 2015, el concepto de clases se introdujo en JavaScript. Esto fue simplemente una adición sintáctica a la herencia existente basada en prototipos y no agregó ninguna funcionalidad nueva al lenguaje.

Sintaxis y ejemplos de constructor en Javascript

1) Método del constructor

A continuación se muestra el método del constructor. Este método se usa dentro del prototipo de la clase.

Sintaxis

constructor((arguments))( … )

Código

class Employee(
constructor(id, name)(
this.id = id;
this.name = name;
))
var emp1 = new Employee(123, "John");
console.log(emp1.name);

Salida:

2) Constructor de objetos (constructores incorporados)

El constructor de objetos se llama directamente cuando se crea un objeto de la clase Object. Esto crea un objeto de clase Object si se pasan parámetros nulos o indefinidos como argumentos. De lo contrario, se crea un objeto del tipo de parámetros dados.

Sintaxis

new Object(( value ))

O

new Array(( value ))

O

new Date(( value ))

O

new String(( value ))

O

new Number(( value ))

O

new Boolean(( value ))

O

new Function(( value ))

O

new Error(( value ))

O

new RegExp(( value ))

y así…

Código:

var name = new Object("John");
var age = new Object(28);
console.log("Name : "+name+" & Age : "+age);

Salida:

3) Constructores de matrices y fechas

De manera similar, los constructores Array y Date también se pueden usar para crear objetos de tipos respectivos.

Código:

var alphabets = new Array('Apple', 'Ball', 'Cat');
console.log(alphabets);

Salida:

Código:

var now = new Date();
console.log(now);

Salida:

Código:

var err = new Error("A user-defined error has occurred.");
console.log(err);

Salida:

4) Constructores personalizados

También podemos declarar y definir nuestros propios constructores para ser utilizados en toda nuestra aplicación. Veamos cómo se puede lograr esto.

Sintaxis

function FunctionName((arguments))( … )

Código

function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + book.name + '\' authored by ' + book.author + ' in the year ' + book.year + '.');
)
var book1 = new Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = new Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = new Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);

Salida:

Importancia de la nueva palabra clave

Ahora puede que se pregunte qué pasa si no uso la nueva palabra clave. ¿Puedo omitir la nueva palabra clave? Bueno, mi amigo, no. Usar la nueva palabra clave es muy esencial.

  • Los constructores de JavaScript son funciones regulares. Están acompañados por una nueva palabra clave para indicarle al motor de JavaScript que se debe construir un nuevo objeto con las propiedades dadas. Sin la nueva palabra clave, simplemente estaría creando más y más objetos globales.
  • La nueva palabra clave devuelve una referencia al objeto recién creado. Luego almacenamos esta referencia en una variable. Sin la nueva palabra clave, se crea el objeto, pero no se devuelve ninguna referencia al objeto. El objeto asume un alcance global. La única referencia a este objeto es a través del objeto de ventana.
  • ¿Confuso? Comprendamos mejor con ejemplos. Considere el ejemplo anterior nuevamente. Eliminamos la nueva palabra clave de las declaraciones de objeto. El resultado fue una excepción a las variables indefinidas. Esto se debe a que, sin la nueva palabra clave, la referencia de los objetos recién creados no se devolvió y, por lo tanto, no se almacenó en nuestras variables book1, book2 y book3. Cuando intentamos acceder a estas variables en el método del libro de visualización, se produce la excepción.

Código:

function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + book.name + '\' authored by ' + book.author + ' in the year ' + book.year + '.');
)
var book1 = Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);

Salida:

En el mismo ejemplo, si modificamos el método de visualización del libro para acceder a los objetos a través del alcance de la ventana, obtenemos un resultado inesperado.

Código:

function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + window.name + '\' authored by ' + window.author +' in the year ' + window.year + '.');
)
var book1 = Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);

Salida:

Ahora, como ejercicio, ¡haga una pequeña lluvia de ideas para descubrir por qué obtenemos este resultado!

Constructores de alcance seguro

Los constructores integrados en JavaScript son constructores seguros para el alcance. No crean variables de ámbito global cuando se les llama sin una nueva palabra clave. Por lo tanto, estos objetos se pueden crear de forma segura con o sin una nueva palabra clave.

Código

function SampleFn(argument) (
// if "this" is not an instance of the constructor
// it means it was called without new
if (!(this instanceof SampleFn)) (
// call the constructor again with new
return new SampleFn(argument);
)
// The code to construct properties and methods
)

Sí, usted también puede crear constructores seguros para el alcance definidos por el usuario. Continúe, cree un constructor seguro para nuestros libros en el ejemplo anterior.

Conclusión

Este artículo dio una demostración en profundidad de los constructores de JavaScript. Esto también ayuda a comprender el funcionamiento de JavaScript. La clave para recordar aquí es que, aunque técnicamente no hay clases en JavaScript, los métodos y prototipos proporcionan una funcionalidad similar a disposición del desarrollador. Y sí, la nueva palabra clave es importante.

Artículos recomendados

Esta ha sido una guía para Constructor en JavaScript. Aquí discutimos sus tipos y métodos importantes con Cómo crear un constructor seguro para el alcance. También puede consultar nuestros artículos para obtener más información.

  1. ¿Qué puede hacer Javascript?
  2. ¿Qué es JavaScript?
  3. Cómo instalar JavaScript
  4. Destructor en Java
  5. Funciones de expresiones regulares en Python (ejemplo)
  6. Ejemplos de esta palabra clave
  7. Trabajo y reglas de instancia de Java con ejemplo