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
|
---
title: operatore new
slug: Web/JavaScript/Reference/Operators/new
tags:
- Espressioni di sinistra
- JavaScript
- Operatore
translation_of: Web/JavaScript/Reference/Operators/new
---
<div>{{jsSidebar("Operators")}}</div>
<p>L'<strong>operatore <code><font face="Consolas, Liberation Mono, Courier, monospace">new</font></code></strong> crea un'istanza di un tipo di oggetto definito dall'utente o di uno dei tipi di oggetto nativi che ha una funzione costruttore.</p>
<h2 id="Sintassi">Sintassi</h2>
<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre>
<h3 id="Parametri">Parametri</h3>
<dl>
<dt><code>constructor</code></dt>
<dd>Una funzione che specifica il tipo dell'oggetto istanziato.</dd>
</dl>
<dl>
<dt><code>arguments</code></dt>
<dd>Una lista di valori con i quali <code>constructor</code> sarà chiamato.</dd>
</dl>
<h2 id="Descrizione">Descrizione</h2>
<p>Creare un oggetto definito dall'utente richiede due step:</p>
<ol>
<li>Definire il tipo di oggetto scrivendo una funzione.</li>
<li>Creare un'istanza dell'oggetto con <code>new</code>.</li>
</ol>
<p>Per definire un tipo di oggetto, crea una funzione per il tipo di oggetto che specifichi il suo nome e le sue proprietà. Un oggetto può avere una proprietà che è se stessa un oggetto. Vedi l'esempio sotto.</p>
<p>Quando il codice <code>new <em>Foo</em>(...)</code> viene eseguito, ecco cosa accade:</p>
<ol>
<li>Un nuovo oggetto viene creato ed eredita da <code><em>Foo</em>.prototype</code>.</li>
<li>La funzione costruttore <em>Foo</em> viene chiamata con gli argomenti specificati e con <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> legato all'oggetto appena creato. <code>new Foo </code>è identica a <code>new Foo()</code>, ovvero se nessun argomento è specificato, <em>Foo</em> viene chiamato senza argumenti.</li>
<li>L'oggetto ritornato dalla funzione costruttore diventa il risultato dell'intera espressione <code>new</code>. Se la funzione costruttore non ritorna esplicitamente un oggetto, viene invece usato l'oggetto creato nello step 1. (Normalmente i costruttori non ritornano un valore, ma possono scegliere di farlo se vogliono sovrascrivere il processo di creazione di un normale oggetto).</li>
</ol>
<p>Puoi sempre aggiungere una proprietà all'oggetto che hai creato precedentemente. Per esempio, la dichiarazione <code>car1.color = "black"</code> aggiunge una proprietà <code>color</code> a <code>car1</code>, e gli assegna il valore di "<code>black</code>". Tuttavia, questo non influenza nessun altro oggetto. Per aggiungere una nuova proprietà a tutti gli oggetti dello stesso tipo, devi aggiungere la proprietà alla definizione del tipo di oggetto, in questo caso <code>Car</code>.</p>
<p>Puoi aggiungere una proprietà condivisa ad un tipo di oggetto che hai definito prima usando la proprietà <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>.</p>
<p>Questo definisce una proprietà che è condivisa da tutti gli oggetti creati con quella funzione, piuttosto che solo da un'istanza di quel tipo di oggetto. Il seguente codice aggiunge una proprietà con il valore <code>null</code> a tutti gli oggetti di tipo <code>car, </code>e poi sovrascrive quel valore con la stringa "<code>black</code>" solo nell'oggetto istanza <code>car1.</code> Per altre informazioni, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p>
<p> </p>
<pre class="brush: js">function Car() {}
car1 = new Car();
car2 = new Car();
console.log(car1.color); // undefined
Car.prototype.color = "original color";
console.log(car1.color); // original color
car1.color = 'black';
console.log(car1.color); // black
console.log(car1.__proto__.color) //original color
console.log(car2.__proto__.color) //original color
console.log(car1.color) // black
console.log(car2.color) // original color
</pre>
<p class="note">Se non hai usato l'operatore <code>new</code>, <strong>la funzione constructor verrà invocata come una qualunque altra funzione</strong>, <em>senza creare un nuovo Object.</em><strong> </strong>in questo caaso, anche il valore di <code>this</code> è diverso.</p>
<h2 id="Esempi">Esempi</h2>
<h3 id="Tipo_di_oggetto_e_oggetto_istanza">Tipo di oggetto e oggetto istanza</h3>
<p>Metti caso di volere creare un tipo di oggetto per le macchine. Vuoi che questo tipo di oggetto si chiami <code>car</code>, e vuoi che abbia queste proprietà: make (brand, marca), model (modello) e year (anno). Per fare questo, potresti scrivere la seguente funzione:</p>
<pre class="brush: js">function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
</pre>
<p>Adesso puoi creare un oggetto chiamato <code>myCar</code> in questo modo:</p>
<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
</pre>
<p>Questa dichiarazione crea <code>myCar </code>e gli assegna i valori specificati per le sue proprietà. Poi il valore di <code>mycar.make</code> è "Eagle", <code>mycar.year</code> è il numero intero 1993, e così via.</p>
<p>Puoi creare quanti oggetti <code>Car</code> vuoi utilizzando <code>new</code>. Per esempio:</p>
<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
</pre>
<h3 id="Proprietà_dell'oggetto_che_è_se_stesso_un_oggetto">Proprietà dell'oggetto che è se stesso un oggetto</h3>
<p>Supponi di definire un oggetto <code>person</code> in questo modo:</p>
<pre class="brush: js">function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
</pre>
<p>E poi istanzi due nuove oggetti <code>Person</code> in questo modo:</p>
<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M");
var ken = new Person("Ken Jones", 39, "M");
</pre>
<p>Poi puoi riscrivere la definizione di <code>Car</code> per includere una proprietà <code>owner</code> (proprietario) che accetta un oggetto persona, ecco come:</p>
<pre class="brush: js">function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
}
</pre>
<p>Per istanziare i nuovi oggetti, poi fai così:</p>
<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
var car2 = new Car("Nissan", "300ZX", 1992, ken);
</pre>
<p>Invece di passare una stringa letterale o un valore intero quando crei i nuovi oggetti, le dichiarazioni sopra passano gli oggetti <code>rand</code> e <code><font face="Consolas, Liberation Mono, Courier, monospace">ken</font></code> come parametri per i proprietari. Per cercare il nome del proprietario (owner) in <code><font face="Consolas, Liberation Mono, Courier, monospace">car2</font></code>, puoi accedere alla seguente proprietà:</p>
<pre class="brush: js">car2.owner.name
</pre>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specifiche</th>
<th scope="col">Status</th>
<th scope="col">Commento</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>Initial definition. Implemented in JavaScript 1.0.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilità_browser">Compatibilità browser</h2>
<p>{{Compat("javascript.operators.new")}}</p>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Reflect.construct()")}}</li>
</ul>
|
