Tutorial de JS

JS HOME Introdução JS JS Para onde Saída JS Declarações JS Sintaxe JS Comentários JS Variáveis ​​JS JS Let JS Const Operadores JS JS Aritmética Atribuição de JS Tipos de dados JS Funções JS Objetos JS Eventos JS Strings JS Métodos de string JS Pesquisa de String JS Modelos de String JS Números JS Métodos de número JS Matrizes JS Métodos de matriz JS Classificação de matriz JS Iteração de matriz JS Const da matriz JS Datas JS Formatos de data JS Métodos de obtenção de data JS Métodos de conjunto de datas JS JS Math JS Aleatório JS Booleanos Comparações JS Condições JS Interruptor JS Circuito JS para JS Loop Para Entrada JS Loop Para De JS Loop Enquanto Quebra de JS Iteráveis ​​JS Conjuntos JS Mapas JS Tipo JS de Conversão de tipo JS JS bit a bit JS RegExp Erros JS Escopo JS Içamento JS Modo estrito JS JS esta palavra-chave Função de seta JS Classes JS JS JSON Depuração JS Guia de estilo JS Práticas recomendadas de JS Erros de JS Desempenho JS Palavras reservadas JS

Versões JS

Versões JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Histórico de JS

Objetos JS

Definições de objeto Propriedades do objeto Métodos de objeto Exibição de objetos Acessadores de objetos Construtores de objetos Protótipos de Objetos Iteráveis ​​de objeto Conjuntos de objetos Mapas de objetos Referência do objeto

Funções JS

Definições de função Parâmetros de função Invocação de função Chamada de Função Função Aplicar Fechamentos de Função

Classes JS

Introdução à aula Herança de classe Classe Estática

JS Assíncrono

Retornos de chamada JS JS Assíncrono Promessas JS JS Async/Aguardar

JS HTML DOM

Introdução ao DOM Métodos DOM Documento DOM Elementos DOM HTML DOM Formulários DOM CSS DOM Animações DOM Eventos DOM Ouvinte de eventos DOM Navegação DOM Nós DOM Coleções DOM Listas de nós DOM

BOM do navegador JS

Janela JS Tela JS Localização JS Histórico de JS Navegador JS Alerta pop-up JS Temporização JS Cookies JS

APIs da Web JS

Introdução à API da Web API de formulários da Web API de histórico da web API de armazenamento da Web API do trabalhador da Web API de busca da Web API de geolocalização da Web

JS AJAX

Introdução AJAX AJAX XML Http Solicitação AJAX Resposta AJAX Arquivo XML AJAX PHP AJAX ASP AJAX Banco de dados AJAX Aplicativos AJAX Exemplos AJAX

JS JSON

Introdução JSON Sintaxe JSON JSON x XML Tipos de dados JSON Análise JSON JSON Stringify Objetos JSON Matrizes JSON Servidor JSON JSON PHP HTML JSON JSON JSONP

JS x jQuery

Seletores jQuery HTML jQuery jQuery CSS jQuery DOM

Gráficos JS

Gráficos JS Tela JS JS Plotly JS Chart.js JS Google Chart JS D3.js

Exemplos JS

Exemplos JS JS HTML DOM Entrada HTML JS Objetos HTML JS Eventos HTML JS Navegador JS Editor JS Exercícios JS Teste JS Certificado JS

Referências JS

Objetos JavaScript Objetos HTML DOM


Construtores de objetos JavaScript


Exemplo

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

É considerado uma boa prática nomear funções de construtor com uma primeira letra maiúscula.


Tipos de objeto (plantas) (classes)

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

Às vezes precisamos de um " plano " 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 objetos.

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

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


A palavra- chave esta

Em JavaScript, a coisa chamada thisé o objeto que "possui" o código.

O valor de this, quando usado em um objeto, é o próprio objeto.

Em uma função construtora thisnão tem valor. É um substituto para o novo objeto. O valor de thisse tornará o novo objeto quando um novo objeto for criado.

Observe que thisnão é uma variável. É uma palavra-chave. Você não pode alterar o valor de this.


Adicionando uma propriedade a um objeto

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

Exemplo

myFather.nationality = "English";

A propriedade será adicionada ao myFather. Não para minha mãe. (Não para objetos de outra pessoa).


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

O método será adicionado ao myFather. Não para minha mãe. (Não para objetos de outra pessoa).


Adicionando uma propriedade a um construtor

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

Exemplo

Person.nationality = "English";

Para adicionar uma nova propriedade a um construtor, você deve adicioná-la à 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";
}

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

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

A adição de métodos a um construtor de objetos deve ser feita dentro da 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 de name à propriedade lastName da pessoa.

Agora você pode tentar:

myMother.changeName("Doe");

JavaScript sabe de qual pessoa você está falando "substituindo" isso por myMother .


Construtores JavaScript integrados

JavaScript tem construtores embutidos 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

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


Você sabia?

Como você pode ver acima, o JavaScript tem versões de objeto dos tipos de dados primitivos String, Numbere Boolean. Mas não há razão para criar objetos complexos. Os valores primitivos são muito mais rápidos:

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

Use literais numéricos 50em vez de new Number().

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

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

Use literais de matriz []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

Objetos de String

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

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

Aprenda porque strings não devem ser criadas como objeto no capítulo JS Strings .


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 newpalavra-chave:
x = new Number(30)

Aprenda porque os números não devem ser criados como objeto no capítulo Números JS .


Objetos Booleanos

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

Mas booleanos também podem ser criados como objetos usando a newpalavra-chave:
x = new Boolean(false)

Aprenda porque booleanos não devem ser criados como objeto no capítulo JS Booleans .