Construtores JavaScript

Índice

    Mostrar índice

Exemplo

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

Notas

É considerada uma boa prática nomear funções construtoras com a primeira letra maiúscula.

Sobre isso

Em uma função construtora this não possui valor. É um substituto para o novo objeto. O valor de this se tornará o novo objeto quando um novo objeto é criado.

Veja também:

O tutorial de JavaScript este

Tipos de objetos (projetos) (classes)

Os exemplos dos capítulos anteriores são limitados. Eles criam apenas objetos únicos.

Às vezes precisamos de um "projeto" para criar muitos objetos do mesmo "tipo".

A maneira de criar um "tipo de objeto" é usar uma função construtora de objeto.

No exemplo acima, function Person() é uma função construtora de objeto.

Objetos do mesmo tipo são criados chamando a função construtora com a palavra-chave new:

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

O que é isso?

Em JavaScript, a palavra-chave this refere-se a um objeto.

Qual objeto depende de como este está sendo invocado (usado ou chamado).

A palavra-chave this refere-se a diferentes objetos dependendo de como é usada:

  • Em um método de objeto, this refere-se ao objeto.

  • Sozinho, isto refere-se ao objeto global.

  • Em uma função, this refere-se ao objeto global.

  • Em uma função, no modo estrito, isso é indefinido.

  • Em um evento, this refere-se ao elemento que recebeu o evento.

  • Métodos como call(), apply() e bind() pode referir isto a qualquer objeto.

Observação

isto não é uma variável. É uma palavra-chave. Você não pode alterar o valor de isto.

Veja também:

O tutorial de JavaScript este

Adicionando uma propriedade a um objeto

Adicionar uma nova propriedade a um objeto existente é fácil:

Exemplo

myFather.nationality = "English";

Experimente você mesmo →

<!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>

A propriedade será adicionada a myFather. Não para minha mãe. (Não para qualquer outra pessoa se opõe).

Adicionando um método a um objeto

Adicionar um novo método a um objeto existente é fácil:

Exemplo

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

Experimente você mesmo →

<!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>

O método será adicionado ao myFather. Não para minha mãe. (Não para qualquer outra pessoa se opõe).

Adicionando uma propriedade a um construtor

Você não pode adicionar uma nova propriedade a um construtor de objeto da mesma forma que adicione uma nova propriedade a um objeto existente:

Exemplo

Person.nationality = "English";

Experimente você mesmo →

<!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 adicionar uma nova propriedade a um construtor, você deve adicioná-la ao função construtora:

Exemplo

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

Experimente você mesmo →

<!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>

Desta forma, as propriedades do objeto podem ter valores padrão.

Adicionando um método a um construtor

Sua função construtora também pode definir métodos:

Exemplo

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

Experimente você mesmo →

<!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>

Você não pode adicionar um novo método a um construtor de objeto da mesma forma que adiciona um novo método para um objeto existente.

A adição de métodos a um construtor de objeto deve ser feita dentro do função construtora:

Exemplo

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

A função changeName() atribui o valor do nome ao nome da pessoa propriedade lastName.

Agora você pode tentar:

myMother.changeName("Doe");

Experimente você mesmo →

<!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 quem você é falando sobre "substituindo" isto por minhaMãe.

Construtores JavaScript integrados

JavaScript possui construtores 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

Experimente você mesmo →

<!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>

O objeto Math() não está na lista. Math é um objeto global. A palavra-chave new não pode ser usada em Matemática.

Você sabia?

Como você pode ver acima, JavaScript possui versões de objeto do primitivo tipos de dados String, Número e Booleano . Mas não há razão para criar objetos complexos. Valores primitivos são muito mais rápidos:

Use literais de string "" em vez de new String().

Use números literais 50 em vez de new Number().

Use literais booleanos true/false em vez de new Boolean().

Use literais de objeto {} em vez de new Object().

Use literais de array [] em vez de new Array().

Use literais padrão /()/ em vez de new RegExp().

Use expressões de função () {} em vez de new Function().

Exemplo

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

Experimente você mesmo →

<!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 string

Normalmente, strings são criadas como primitivas: firstName="John"

Mas strings também podem ser criadas como objetos usando a palavra-chave new:
primeiroNome=new String("John")

Aprenda por que strings não devem ser criadas como objetos no capítulo Cordas JS.

Objetos numéricos

Normalmente, os números são criados como primitivos: x=30

Mas os números também podem ser criados como objetos usando a palavra-chave new:
x=novo Número(30)

Saiba por que os números não devem ser criados como objetos no capítulo Números JS.

Objetos Booleanos

Normalmente, os booleanos são criados como primitivos: x = falso

Mas booleanos também podem ser criados como objetos usando a palavra-chave new:
x=novo Booleano(falso)

Aprenda por que booleanos não devem ser criados como objeto no capítulo Booleanos JS.