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
|
---
title: Function.prototype.call()
slug: Web/JavaScript/Reference/Global_Objects/Function/call
translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
---
<div>{{JSRef}}</div>
<p><span class="seoSummary">Il metodo <code><strong>call()</strong></code> esegue una funzione con un dato valore <code>this</code> e argomenti passati singolarmente.</span></p>
<div class="note">
<p><strong>Note:</strong> Mentre la sintassi di questa funzione è quasi identica a quella di {{jsxref("Function.prototype.apply", "apply()")}}, la differenza fondamentale è che <code>call()</code> accetta una <strong>lista di argomenti</strong> mentre <code>apply()</code> accetta un <strong>singolo array di argomenti</strong>.</p>
</div>
<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
<h2 id="Sintassi">Sintassi</h2>
<pre class="syntaxbox"><var>func</var>.call([<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>]])</pre>
<h3 id="Parametri">Parametri</h3>
<dl>
<dt><code><var>thisArg</var></code> {{optional_inline}}</dt>
<dd>
<p>Il valore da usare come <code>this</code> quando si esegue <code><var>func</var></code>.</p>
<div class="blockIndicator note">
<p><strong>Attenzione:</strong> In certi casi, <code><var>thisArg</var></code> potrebbe non essere il valore reale visto dal metodo.</p>
<p>Se il metodo è una funzione in {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} e {{jsxref("Global_Objects/undefined", "undefined")}} sarà sostituito dall'oggetto globale e i valori di tipo primitiva verranno convertiti in oggetti.</p>
</div>
</dd>
<dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt>
<dd>Argomenti per la funzione.</dd>
</dl>
<h3 id="Valore_restituito">Valore restituito</h3>
<p>Il risultato dell'esecuzione della funzione con il <code><strong>this</strong></code> e gli argomenti specificati.</p>
<h2 id="Descrizione">Descrizione</h2>
<p>Il metodo <code>call()</code> consente a una funzione/metodo appartenente a un oggetto di essere essere assegnata e chiamata per un oggetto diverso..</p>
<p><code>call()</code> fornisce un nuova valore di <code>this</code> alla funzione/metodo. Con <code>call()</code>, si può scrivere un metodo una volta ed ereditarlo in un altro oggetto senza dover riscrivere il metodo per il nuovo oggetto.</p>
<h2 id="Esempi">Esempi</h2>
<h3 id="Usare_call_per_collegare_costruttori_per_un_oggetto">Usare <code>call</code> per collegare costruttori per un oggetto</h3>
<p>Si può usare <code>call</code> per collegare costruttori per un oggetto (simile a Java).</p>
<p>Nell'esempio seguente, il costruttore per l'oggetto <code>Product</code> è definito con 2 parametri: <code>name</code> e <code>price</code>.</p>
<p>Due altre funzioni, <code>Food</code> e <code>Toy</code>, invocano <code>Product</code>, passando <code>this</code>, <code>name</code>, e <code>price</code>. <code>Product</code> inizializza le proprietà <code>name</code> e <code>price</code>. Entrambe le funzioni specializzate definiscono la <code>category</code>.</p>
<pre class="brush: js">function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
const cheese = new Food('feta', 5);
const fun = new Toy('robot', 40);
</pre>
<h3 id="Usare_call_per_invocare_una_funzione_anonima">Usare <code>call</code> per invocare una funzione anonima</h3>
<p>In questo esempio, viene create una funzione anonima e usato <code>call</code> per invocarla su ogni oggetto di un array.</p>
<p>Lo scopo principale della funzione anonima qui è di aggiungere una funzione <code>print</code> o ogni oggetto il quale è in grado di stampare il corretto indice dell'oggetto nell'array.</p>
<div class="blockIndicator note">
<p>Passare l'oggetto come valore <code>this</code> non è strettamente necessario ma è fatto a scopo esplicativo.</p>
</div>
<pre class="brush: js">const animals = [
{ species: 'Lion', name: 'King' },
{ species: 'Whale', name: 'Fail' }
];
for (let i = 0; i < animals.length; i++) {
(function(i) {
this.print = function() {
console.log('#' + i + ' ' + this.species
+ ': ' + this.name);
}
this.print();
}).call(animals[i], i);
}
</pre>
<h3 id="Usare_call_per_invocare_una_funzione_e_specificare_il_contesto_per_this">Usare <code>call</code> per invocare una funzione e specificare il contesto per '<code>this</code>'</h3>
<p>Nell'esempio sotto, quando viene eseguita <code>greet</code>, il valore di <code>this</code> verrà legato all'oggetto <code>obj</code>.</p>
<pre class="brush: js">function greet() {
const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
console.log(reply);
}
const obj = {
animal: 'cats', sleepDuration: '12 and 16 hours'
};
greet.call(obj); // cats typically sleep between 12 and 16 hours
</pre>
<h3 id="Usare_call_per_invocare_una_funzione_senza_specificare_il_primo_parametro">Usare <code>call</code> per invocare una funzione senza specificare il primo parametro</h3>
<p>Nell'esempio sotto, viene invocata la funzione <code>display</code> senza passare il primo parametro. Se il primo parametro non è passato il valore di <code>this</code> è legato all'oggetto globale.</p>
<pre class="brush: js">var sData = 'Wisen';
function display() {
console.log('sData value is %s ', this.sData);
}
display.call(); // sData value is Wisen</pre>
<div class="note">
<p><strong>Attenzione:</strong> In strict mode il valore di <code>this</code> sarà <code>undefined</code>. Vedere sotto.</p>
</div>
<pre class="brush: js">'use strict';
var sData = 'Wisen';
function display() {
console.log('sData value is %s ', this.sData);
}
display.call(); // Cannot read the property of 'sData' of undefined</pre>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specifiche</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("javascript.builtins.Function.call")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{jsxref("Function.prototype.bind()")}}</li>
<li>{{jsxref("Function.prototype.apply()")}}</li>
<li>
<p><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></p>
</li>
</ul>
|
