aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/global_objects/function/index.html
blob: fa6e32e2b1de7516f5775aef5c9e224447263196 (plain)
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
225
226
227
228
229
230
231
232
233
234
---
title: Function
slug: Web/JavaScript/Reference/Global_Objects/Function
tags:
  - Constructor
  - Function
  - JavaScript
  - NeedsTranslation
  - TopicStub
translation_of: Web/JavaScript/Reference/Global_Objects/Function
---
<div>{{JSRef("Global_Objects", "Function")}}</div>

<h2 id="Summary" name="Summary"><span class="short_text" id="result_box" lang="pt"><span class="hps">Resumo</span></span></h2>

<p>O <strong><code>construtor Function</code></strong> cria um novo objeto <code>Function</code>. Chamar o construtor diretamente pode criar funções dinamicamente, mas sofre com problemas de segurança e desempenho semelhante (mas muito menos significativo) a {{jsxref("eval")}}. No entanto, diferentemente de eval, a Função construtora cria funções que executam somente no escopo global.</p>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>

<h3 id="Parameters" name="Parameters">Parâmetros</h3>

<dl>
 <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
 <dd>Nomes para serem usandos pela função como nomes formais de argumentos. Cada um deve ser uma string que corresponde para uma válida identidade JavaScript ou uma lista de certas strings separadas com uma <span class="short_text" id="result_box" lang="pt"><span class="hps">vírgula; por exemplo "x", "theValue". our "a,b".</span></span></dd>
 <dt><code>functionBody</code></dt>
 <dd>Uma string que contém as <span id="result_box" lang="pt"><span class="hps">instruções </span></span>JavaScript que <span id="result_box" lang="pt"><span class="hps">compõem </span></span><span class="short_text" id="result_box" lang="pt"><span class="hps">a definição da função.</span></span></dd>
</dl>

<h2 id="Description" name="Description">Descrição</h2>

<p>Objetos <code>Function</code> criados com o construtor <code>Function</code> são <em>parseados</em> quando a função é criada. Isto é menos eficiente que criar com uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/function">expressão de função</a> ou um <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/function">declaração de função</a> e chamando-a dentro do seu código, porque tais funções são <em>parseadas</em> com o resto do código.</p>

<p>Todos os argumentos passados para a função são tratados como os nomes dos indetificadores dos parâmetros na função a ser criada, na mesma ordem na qual eles foram passados.</p>

<div class="note">
<p><strong>Nota:</strong> Funções criadas com o construtor <code>Function não criam closures</code> para o seu contexto de criação; elas sempre são criadas no escopo global. Quando executadas, elas terão acesso apenas às suas variáveis locais ou globais, não terão acesso às variáveis do escopo na qual o construtor <code>Function</code> foi chamado. Isto é diferente de usar {{jsxref("Global_Objects/eval", "eval")}} com o código de uma expressão de função.</p>
</div>

<p>Invocar o construtor <code>Function</code> como uma função (sem usar o operador <code>new</code>) tem o mesmo efeito de chamá-la como um construtor.</p>

<h2 id="Propriedades_e_Métodos_da_Function">Propriedades e Métodos da <code>Function</code></h2>

<p>O objeto global <code>Function</code> não tem métodos ou propriedades próprias, no entanto, como ela é uma função, ela herda alguns métodos e propriedades através do prototype chain do {{jsxref("Function.prototype")}}.</p>

<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2>

<h3 id="Propriedades">Propriedades</h3>

<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div>

<h3 id="Methods" name="Methods">Métodos</h3>

<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div>

<h2 id="Function_instances" name="Function_instances"><code>Function</code> instances</h2>

<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p>

<h2 id="Examples" name="Examples">Exemplos:</h2>

<h3 id="Example.3A_Specifying_arguments_with_the_Function_constructor" name="Example.3A_Specifying_arguments_with_the_Function_constructor">Exemplos: Especificando argumentos com o construtor <code>Function</code></h3>

<p>O código a seguir cria um objeto <code>Function</code> que recebe dois argumentos.</p>

<pre class="brush: js">// O exemplo pode ser executado direto no seu console JavaScript

// Cria uma função que recebe 2 argumentos e retorna a soma entre os dois:
var adder = new Function('a', 'b', 'return a + b');

// Chamada da função
adder(2, 6);
// &gt; 8
</pre>

<p>Os argumentos "<code>a</code>" e "<code>b</code>" são os argumentos que serão usados no corpo da função, "<code>return a + b</code>".</p>

<h3 id="Example_A_recursive_shortcut_to_massively_modify_the_DOM" name="Example:_A_recursive_shortcut_to_massively_modify_the_DOM">Exemplo: Um atalho recursivo para modificar o DOM em massa</h3>

<p>Creating functions with the <code>Function</code> constructor is one of the ways to dynamically create an indeterminate number of new objects with some executable code into the global scope from a function. The following example (a recursive shortcut to massively modify the DOM) is impossible without the invocation of the <code>Function</code> constructor for each new query if you want to avoid closures.</p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;MDN Example - a recursive shortcut to massively modify the DOM&lt;/title&gt;
&lt;script type="text/javascript"&gt;
var domQuery = (function() {
  var aDOMFunc = [
    Element.prototype.removeAttribute,
    Element.prototype.setAttribute,
    CSSStyleDeclaration.prototype.removeProperty,
    CSSStyleDeclaration.prototype.setProperty
  ];

  function setSomething(bStyle, sProp, sVal) {
    var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle &lt;&lt; 1],
        aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
        aNodeList = bStyle ? this.cssNodes : this.nodes;

    if (bSet &amp;&amp; bStyle) { aArgs.push(''); }
    for (
      var nItem = 0, nLen = this.nodes.length;
      nItem &lt; nLen;
      fAction.apply(aNodeList[nItem++], aArgs)
    );
    this.follow = setSomething.caller;
    return this;
  }

  function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
  function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
  function getSelectors() { return this.selectors; };
  function getNodes() { return this.nodes; };

  return (function(sSelectors) {
    var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);');
    oQuery.selectors = sSelectors;
    oQuery.nodes = document.querySelectorAll(sSelectors);
    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; });
    oQuery.attributes = setAttribs;
    oQuery.inlineStyle = setStyles;
    oQuery.follow = getNodes;
    oQuery.toString = getSelectors;
    oQuery.valueOf = getNodes;
    return oQuery;
  });
})();
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class="testClass"&gt;Lorem ipsum&lt;/div&gt;
&lt;p&gt;Some text&lt;/p&gt;
&lt;div class="testClass"&gt;dolor sit amet&lt;/div&gt;

&lt;script type="text/javascript"&gt;
domQuery('.testClass')
  .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum')
  .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px');
&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</pre>

<h2 id="Especificação">Especificação</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>ECMAScript 1st Edition.</td>
   <td>Standard</td>
   <td>Definição inicial. Implementado no JavaScript 1.0.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade">Compatibilidade</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</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>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</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="See_also" name="See_also">See also</h2>

<ul>
 <li>{{jsxref("Operators/function", "function Expression", "", 1)}}</li>
 <li>{{jsxref("Statements/function", "function Statement", "", 1)}}</li>
 <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
</ul>