path: root/files/id/web/javascript/reference/global_objects/function/index.html

---
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}}</div>

<p>Konstruktor<strong><code><strong> </strong></code><code>Function</code> </strong>membuat sebuah objek <code>Function</code> baru. Di Javascript setiap fungsi adalah sebuah objek <code>Function</code>.</p>

<h2 id="Sintaks">Sintaks</h2>

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

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
 <dd>Nama yang akan digunakan oleh fungsi sebagai nama formal argumen. Masing-masing harus berupa string yang sesuai dengan identifier JavaScript yang valid atau daftar string dipisahkan dengan koma; contohnya "<code>x</code>", "<code>theValue</code>", atau "<code>a,b</code>".</dd>
 <dt><code>functionBody</code></dt>
 <dd>String berisi sintaks JavaScript yang terdiri dari definisi fungsi.</dd>
</dl>

<h2 id="Deskripsi">Deskripsi</h2>

<p>Objek <code> Function</code> yang dibuat dengan konstruktor <code>Function</code> diuraikan ketika fungsi dibuat. Hal tersebut kurang efisien dibandingkan dengan mendeklarasikan fungsi dengan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> atau <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> dan memanggilnya dengan kode Anda, karena fungsi-fungsi tersebut diuraikan dengan sisa kode.</p>

<p>Semua argumen yang diteruskan ke fungsi diperlakukan sebagai nama identifier parameter dalam fungsi yang akan dibuat, dalam urutan yang dilewatkan.</p>

<div class="note">
<p><strong>Catatan:</strong> Fungsi dibuat dengan konstruktor <code>Function</code>  jangan membuat penutup pada konteks kreasi mereka; Mereka selalu dibuat dalam ruang lingkup global. Saat menjalankannya, mereka hanya bisa mengakses variabel lokal mereka sendiri dan variabel global, bukan variabel dari ruang lingkup dimana konstruktor <code>Function</code> dipanggil. Berbeda dari menggunakan {{jsxref("eval")}} dengan kode untuk fungsi ekspresi.</p>
</div>

<p>memanggil konstruktor <code>Function</code> sebagai sebuah fungsi (tanpa menggunakan operatur <code>baru</code>) mempunyai efek yang sama seperti memanggilnya sebagai konstruktor</p>

<h2 id="Properti_dan_Method_Function">Properti dan Method <code>Function</code></h2>

<p>Objek <code>Function</code> global tidak memiliki method atau properti sendiri. Namun, fungsi itu sendiri mewarisi beberapa method dan properti melalui prototipe dari {{jsxref("Function.prototype")}}.</p>

<h2 id="Objek_prototipe_Function">Objek prototipe<code> Function</code></h2>

<h3 id="Properti">Properti</h3>

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

<h3 id="Method">Method</h3>

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

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

<p><code>Function</code> instances mewarisi method dan properti dari {{jsxref("Function.prototype")}}. Seperti halnya semua konstruktor, Anda dapat mengubah objek prototipe konstruktor untuk membuat perubahan pada semua <code>Function</code> instances.</p>

<h2 id="Contoh">Contoh</h2>

<h3 id="Menentukan_arguman_dengan_konstruktor_Function">Menentukan arguman dengan konstruktor <code>Function</code></h3>

<p>Dibawah ini kode untuk membuat sebuah objek <code>Function</code> yang menggunakan dua argumen.</p>

<pre class="brush: js">// Contoh dapat dijalankan langsung di konsol JavaScript Anda

// Buat fungsi yang mengambil dua argumen dan mengembalikan jumlah argumen tersebut
var adder = new Function('a', 'b', 'return a + b');

// Memanggil fungsi
adder(2, 6);
// &gt; 8
</pre>

<p>Argumen "<code>a</code>" dan "<code>b</code>" adalah nama argumen formal yang digunakan pada function body "<code>return a + b</code>".</p>

<h3 id="Pintasan_rekursif_untuk_memofikasi_DOM_secara_masif">Pintasan rekursif untuk memofikasi DOM secara masif</h3>

<p>Membuat fungsi dengan konstruktor <code>Function</code> adalah salah satu cara dinamis untuk membuat objek baru dengan beberapa kode yang dapat dieksekusi ke dalam lingkup global dari suatu fungsi. Contoh berikut (pintasan rekursif untuk memodifikasi DOM secara masif) tidak dimungkinkan tanpa permintaan konstruktor <code>Function </code>untuk setiap kueri baru jika Anda ingin menghindari penutup tiap fungsi.</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="Spesifikasi">Spesifikasi</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('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition. Implemented in 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>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Kesesuaian_Browser">Kesesuaian Browser</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="Lihat_juga">Lihat juga</h2>

<ul>
 <li>{{jsxref("Functions", "Functions and function scope")}}</li>
 <li>{{jsxref("Function")}}</li>
 <li>{{jsxref("Statements/function", "function statement")}}</li>
 <li>{{jsxref("Operators/function", "function expression")}}</li>
 <li>{{jsxref("Statements/function*", "function* statement")}}</li>
 <li>{{jsxref("Operators/function*", "function* expression")}}</li>
 <li>{{jsxref("GeneratorFunction")}}</li>
</ul>