1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
|
---
title: new operator
slug: Web/JavaScript/Reference/Operators/new
tags:
- Expressões Left-hand-side
- JavaScript
- Operador
translation_of: Web/JavaScript/Reference/Operators/new
---
<div>{{jsSidebar("Operators")}}</div>
<p>O <strong>operador <code>new</code></strong><code> </code>cria uma instancia de um tipo de objeto definido pelo usuário ou de um dos tipos nativos (<em>built-in</em>) que possuem uma função construtora.</p>
<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}} A fonte deste exemplo interativo é armazenada em um repositório do GitHub. Se você gostaria de contribuir para o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie uma requisição de comando pull.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">new <em>construtor</em>[([<em>argumentos</em>])]</pre>
<h3 id="Parametros">Parametros</h3>
<dl>
<dt><code>construtor</code></dt>
<dd>Uma função que especifica o tipo da instancia do objetivo.</dd>
</dl>
<dl>
<dt><code>argumentos</code></dt>
<dd>Uma lista de valores com os quais o construtor será chamado.</dd>
</dl>
<h2 id="Descrição">Descrição</h2>
<p>Criar um objeto definido pelo usuário requer dois passos:</p>
<ol>
<li>Definir o tipo de objeto através da escrita de uma função.</li>
<li>Criar uma instancia do objeto utilizando <code>new</code>.</li>
</ol>
<p>Para definir um tipo de objeto, crie uma função para o tipo de objetivo que especifica seu nome e propriedades. Um objeto pode ter uma propriedade que é um outro objeto. Veja os exemplos abaixo:</p>
<p>Quando o código <code>new <em>Foo</em>(...)</code> é executado, acontece o seguinte::</p>
<ol>
<li>Um novo objeto é criado, herdando de <code><em>Foo</em>.prototype</code>.</li>
<li>A função construtora <em>F<code>oo</code></em> é chamado com os argumentos especificados, e com <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> vinculado ao novo objeto criado. <code>new F<em>oo</em></code> é equivalente a <code>new </code><em>F<code>oo</code></em><code>()</code>, ou seja, se nenhuma lista de argumentos for especificada, <em>F<code>oo</code></em> é chamado sem argumentos.</li>
<li>O objeto retornado pela função construtora é o resultado de toda expressão <code>new</code>. Se a função construtora não retornar um objeto explicitamente, o objeto criado no passo 1 é então usado. (Normalmente construtores não retornam um valor, mas eles podem escolher fazê-lo se eles quiserem sobrescrever o processo normal de criação de objeto.)</li>
</ol>
<p>Você sempre pode adicionar uma propriedade à um objeto definido previamente. Por exemplo, <code>carro1.cor = "preta"</code> adiciona a propriedade <code>cor</code> em <code>carro1</code>, e atribui a ela o valor de "<code>preta</code>". Entretanto, isso não afeta os outros objetos. Para adicionar a nova propriedade a todos objetos do mesmo tipo, você deve adicionar a propriedade à definição do tipo de objeto <code>Carro</code>.</p>
<p>Você pode adicionar uma propriedade compartilhada à um tipo de objeto definido anteriormente através do uso da propriedade <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Isso define uma propriedade que é compartilhada por todos os objetos criados com essa função, ao invés de apenas uma instancia do tipo de objeto. O código a seguir adiciona uma propriedade cor com valor <code>null</code> à todos objetos do tipo <code>carro</code>, e então sobrescreve aquele valor com a string "<code>preta</code>" somente no objeto de instancia <code>carro1</code>. Para mais informações veja <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p>
<pre class="brush: js">function Carro() {}
carro1 = new Carro();
console.log(carro1.cor); // undefined
Carro.prototype.cor = null;
console.log(carro1.cor); // null
carro1.cor = "preta";
console.log(carro1.cor); // preta
</pre>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Tipo_de_objeto_e_instância_de_objeto">Tipo de objeto e instância de objeto</h3>
<p>Suponha que você quer criar um tipo de objeto para carros. Você quer que esse tipo de objeto se chame <code>carro</code>, e quer que ele tenha propriedade para fabricante, modelo e ano. Para fazer isso, você escreveria a função a seguir:</p>
<pre class="brush: js">function Carro(fabricante, modelo, ano) {
this.fabricante = fabricante;
this.modelo = modelo;
this.ano = ano;
}
</pre>
<p>Agora você pode criar um objeto chamado <code>meucarro</code> como a seguir:</p>
<pre class="brush: js">var meucarro = new Carro("Eagle", "Talon TSi", 1993);
</pre>
<p>Essa declaração cria <code>meucarro</code> e atribui a ele os valores especificados as suas propriedades. Então o valor de <code>meucarro.fabricante</code> é a string "Eagle", <code>meucarro.ano</code> é o inteiro 1993, e assim sucessivamente.</p>
<p>Você pode criar qualquer numero de objetos <code>carro</code> através de chamadas a <code>new</code>. Por exemplo:</p>
<pre class="brush: js">var carrodoken = new Carro("Nissan", "300ZX", 1992);
</pre>
<h3 id="Propriedade_do_objeto_que_é_outro_objeto">Propriedade do objeto que é outro objeto</h3>
<p>Suponha que você defina um objeto chamado <code>pessoa</code> como a seguir:</p>
<pre class="brush: js">function Pessoa(nome, idade, sexo) {
this.nome = nome;
this.idade = idade;
this.sexo = sexo;
}
</pre>
<p>E então instancia dois novos objetos <code>pessoa</code> como a seguir:</p>
<pre class="brush: js">var rand = new Pessoa("Rand McNally", 33, "M");
var ken = new Pessoa("Ken Jones", 39, "M");
</pre>
<p>Então você pode reescrever a definição de <code>carro</code> para incluir uma propriedade dono que aceita um objeto pessoa, como a seguir:</p>
<pre class="brush: js">function Carro(fabricante, modelo, ano, dono) {
this.fabricante = fabricante;
this.modelo = modelo;
this.ano = ano;
this.dono = dono;
}
</pre>
<p>Para instanciar os novos objetos, você então usa o seguinte:</p>
<pre class="brush: js">var carro1 = new Carro("Eagle", "Talon TSi", 1993, rand);
var carro2 = new Carro("Nissan", "300ZX", 1992, ken);
</pre>
<p>Ao invés de passar uma string ou valor inteiro quando criar os novos objetos, as definições acima passam objetos <code>rand</code> e <code>ken</code> como os parâmetros para os donos. Para descobrir o nome do dono do <code>carro2</code>, você pode acessar a seguinte propriedade:</p>
<pre class="brush: js">carro2.dono.nome
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
<td>{{Spec2('ES3')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Definição inicial. Implementado no JavaScript 1.0.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_browser">Compatibilidade de browser </h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Android</th>
<th>Chrome para Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Reflect.construct()")}}</li>
</ul>
|
