Constructores de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

Ejemplo

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

Notas

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

Sobre esto

En una función constructora this no tiene un valor. Es un sustituto del nuevo objeto. El valor de this se convertirá en el nuevo objeto cuando se crea un nuevo objeto.

Ver también:

El tutorial de JavaScript este

Tipos de objetos (planos) (clases)

Los ejemplos de los capítulos anteriores son limitados. Sólo crean objetos individuales.

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

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

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

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

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

¿Qué es esto?

En JavaScript, la palabra clave this se refiere a un objeto.

Qué objeto depende de cómo se invoca (usa o llama) este.

La palabra clave this se refiere a diferentes objetos dependiendo de cómo se use:

  • En un método de objeto, este se refiere al objeto.

  • Por sí solo, este se refiere al objeto global.

  • En una función, this se refiere al objeto global.

  • En una función, en modo estricto, este es indefinido.

  • En un evento, este se refiere al elemento que recibió el evento.

  • Métodos como call(), apply() y bind() puede referir este a cualquier objeto.

Nota

este no es una variable. Es una palabra clave. No puede cambiar el valor de this.

Ver también:

El tutorial de JavaScript este

Agregar una propiedad a un objeto

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

Ejemplo

myFather.nationality = "English";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<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 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add nationality to first object
myFather.nationality = "English";

// Display nationality 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality; 
</script>

</body>
</html>

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

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;
};

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<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 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add a name method to first object
myFather.name = function() {
  return this.firstName + " " + this.lastName;
};

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

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

Agregar una propiedad a un constructor

No puedes agregar una nueva propiedad a un constructor de objetos de la misma manera que lo haces. agregar una nueva propiedad a un objeto existente:

Ejemplo

Person.nationality = "English";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

<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;
}

// You can NOT add a new property to a constructor function
Person.nationality = "English";

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

// Display nationality
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

Para agregar una nueva propiedad a un constructor, debe agregarla al función constructora:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<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;
  this.nationality = "English";
}

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

// Display nationality
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
</script>

</body>
</html>

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;
  };
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<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;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
}

// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 

</script>

</body>
</html>

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

Agregar métodos a un constructor de objetos debe realizarse dentro del 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 nombre al nombre de la persona. propiedad apellido.

Ahora puedes probar:

myMother.changeName("Doe");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>
// Constructor function for Person objects
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;
  }
}
// Create a Person object
const myMother = new Person("Sally","Rally",48,"green");

// Change last name
myMother.changeName("Doe");

// Display last name
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>

</body>
</html>

JavaScript sabe qué persona eres hablando "sustituyendo" esto por miMadre.

Constructores de JavaScript integrados

JavaScript tiene constructores integrados 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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>
const x1 = new String();   // A new String object
const x2 = new Number();   // A new Number object
const x3 = new Boolean();  // A new Boolean object
const x4 = new Object();   // A new Object object
const x5 = new Array();    // A new Array object
const x6 = new RegExp();   // A new RegExp object
const x7 = new Function(); // A new Function object
const x8 = new Date();     // A new Date object

// Display the type of all objects
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>

<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>

<p>Use literals instead like: myArray = []</p>

</body>
</html>

El objeto Math() no está en la lista. Math es un objeto global. La palabra clave new no se puede utilizar en Matemáticas.

¿Sabías?

Como puede ver arriba, JavaScript tiene versiones de objetos de la primitiva tipos de datos Cadena, Número y Booleano . Pero no hay razón para crear objetos complejos. Valores primitivos son mucho más rápidos:

Utilice cadenas literales "" en lugar de new String().

Utilice números literales 50 en lugar de new Number().

Utilice literales booleanos true/false en lugar de new Boolean().

Utilice literales de objeto {} en lugar de new Object().

Utilice 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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

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

<script>
let x1 = "";      // string 
let x2 = 0;       // number
let x3 = false;   // boolean
const x4 = {};    // Object object
const x5 = [];    // Array object
const x6 = /()/;  // RegExp object
const x7 = function(){};  // function

// Display the type of all
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

Objetos de cadena

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

Pero las cadenas también se pueden crear como objetos usando la palabra clave new:
primer nombre=nueva cadena("John")

Descubra por qué las cadenas no deben crearse como objetos 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 palabra clave new:
x=nuevo Número(30)

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

Objetos booleanos

Normalmente, los valores booleanos se crean como primitivos: x = falso

Pero los valores booleanos también se pueden crear como objetos usando la palabra clave new:
x=nuevo booleano(falso)

Descubra por qué los valores booleanos no deben crearse como objetos en el capítulo. Booleanos JS.