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
|
---
title: Function.prototype.call()
slug: Web/JavaScript/Reference/Global_Objects/Function/call
tags:
- Function
- JavaScript
- metodo
translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
---
<div>{{JSRef}}</div>
<p>O método <code><strong>call()</strong></code> realiza a chamada de uma função com o parâmetros <code>this</code> além de outros parâmetros fornecidos individualmente.</p>
<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox notranslate"><var>func</var>.call([<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>]])</pre>
<h3 id="Parâmetros">Parâmetros</h3>
<dl>
<dt><em><code>thisArg</code></em> {{optional_inline}}</dt>
<dd>O valor de <code>this</code> fornecido ao chamar <code><em>func</em></code>.</dd>
</dl>
<div class="blockIndicator note">
<p>Aviso: Em certos casos, <em><code>thisArg</code></em> pode não ser o valor que o método vê.</p>
<p>Se o método for uma função em {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} e {{jsxref("Global_Objects/undefined", "undefined")}} são substituídos pelo objeto global, e valores primitivos são convertidos em objetos.</p>
</div>
<dl>
<dt><em><code>arg1, arg2, ...argN</code></em> {{optional_inline}}</dt>
<dd>Parâmetros para a função.</dd>
</dl>
<h3 id="Resultado">Resultado</h3>
<p>O resultado ao chamar a função em questão com os parâmetros <code>this</code> e os outros argumentos especificados.</p>
<h2 id="Descrição">Descrição</h2>
<p><code>call()</code> permite uma função / método pertencendo a um objeto, ser atribuída a outro objeto e ser chamada desse mesmo.</p>
<p><code>call()</code> fornece um novo valor para <code>this</code> à função / método. Com <code>call()</code>, pode escrever um método uma vez, e depois herdar o método noutro objeto, sem ter de rescrever a função para o novo objeto.</p>
<div class="blockIndicator note">
<p>Nota: Apesar de a sintaxe da função ser quase idêntica à da {{jsxref("Function.prototype.apply", "apply()")}}, a principal diferença é que <code>call()</code> aceita uma <strong>lista de argumentos</strong> (<code>arg1, arg2, ...argN</code>), enquanto <code>apply()</code> aceita <strong>uma matriz de argumentos</strong> (<code>[arg1, arg2, ...argN]</code>).</p>
</div>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Usar_call_para_encadear_construtores_dum_objeto">Usar <code>call</code> para encadear construtores dum objeto</h3>
<p>É possível utilizar <code>call</code> para encadear construtores para um objeto (como em Java).</p>
<p>No exemplo abaixo, o construtor para o objeto <code>Product</code> é definido com dois parâmetros: <code>name</code> e <code>price</code>.</p>
<p>Duas outras funções, <code>Food</code> e <code>Toy</code>, invocam <code>Product</code> passando os parâmetros <code>this</code><font face="Open Sans, arial, sans-serif">, </font><code>name</code> e <code>price</code>. As funções <code>Food</code> e <code>Toy</code> também definem a propriadade <code>category</code>.</p>
<pre class="brush: js notranslate">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="Usar_call_para_invocar_uma_função_anónima">Usar <code>call</code> para invocar uma função anónima</h3>
<p>Neste exemplo, criamos uma função anónima e utilizamos <code>call</code> para invocá-la em cada objeto na matriz.</p>
<p>O principal objetivo da função anónima é inserir a função <code>print</code> em cada objeto. A função <code>print</code> imprimir o índice do objeto na matriz em que se encontra.</p>
<div class="blockIndicator note">
<p>Passar o objeto desta forma (como <code>this</code>) não é necessário, mas foi feito de forma a exemplificar a função.</p>
</div>
<pre class="brush: js notranslate">var animals = [
{ species: 'Lion', name: 'King' },
{ species: 'Whale', name: 'Fail' }
];
for (var 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="Usar_call_para_invocar_a_função_sem_especificar_o_primeiro_argumento">Usar <code>call</code> para invocar a função sem especificar o primeiro argumento</h3>
<p>No exemplo abaixo, quando chamamos a função <code>display</code> sem passar o primeiro argumento. Se o primeiro argumento não é especificado, o objeto global é atribuído a <code>this</code>.<br>
</p>
<pre class="brush: js notranslate">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>Aviso:</strong> Em "strict mode", o valor de <code>this</code> é <code>undefined</code>, exemplificado em baixo.</p>
</div>
<pre class="brush: js notranslate">'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="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</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="Veja_também">Veja também</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>
|
