Function

  • Revision slug: JavaScript/Reference/Global_Objects/Function
  • Revision title: Function
  • Revision id: 365781
  • Created:
  • Creator: ChiLiJung
  • Is current revision? No
  • Comment

Revision Content

大綱

每個函式在 JavaScript 中都試一個 函式 物件

語法

new Function ([arg1[, arg2{{mediawiki.external(', ... argN')}}],] functionBody)

參數

arg1, arg2, ... argN
名稱都試用來當做正式的參數名。每一個字串都要是 JavaScript 可接受的字篡,或是一列字串用逗號隔開,例如 "x", "theValue", 或 "a, b"。
functionBody
一串字用來放 JavaScript 敘述包含函式解釋。

Description

Function objects created with the Function constructor are parsed when the function is created. This is less efficient than declaring a function and calling it within your code, because functions declared with the function statement are parsed with the rest of the code.

All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.

Note: Functions created with the Function constructor do not create closures to their creation contexts; they always run in the window context (unless the function body starts with a "use strict"; statement, in which case the context is undefined).

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

Example

Creating functions with the Function 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 Function constructor for each new query if you want to avoid closures.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example - a recursive shortcut to massively modify the DOM</title>
<script type="text/javascript">
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 << 1],
         aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
         aNodeList = bStyle ? this.cssNodes : this.nodes;

    if (bSet && bStyle) { aArgs.push(""); }
    for (
      var nItem = 0, nLen = this.nodes.length;
      nItem < 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;
  });
})();
</script>
</head>

<body>

<div class="testClass">Lorem ipsum</div>
<p>Some text</p>
<div class="testClass">dolor sit amet</div>

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

</html>

Properties

{{Js_see_prototype("Function", "Properties")}}

The global Function object has no methods of its own, however, it does inherit some methods through the prototype chain.

{{jsOverrides("Function", "Properties", "prototype")}}

Methods

{{Js_see_prototype("Function", "Methods")}}

The global Function object has no methods of its own, however, it does inherit some methods through the prototype chain.

{{jsOverrides("Function", "Methods")}}

Function instances

Function instances inherit from Function.prototype. As with all constructors, you can change the constructor's prototype object to make changes to all Function instances.

Properties

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

Methods

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

Example: Specifying arguments with the Function constructor

The following code creates a Function object that takes two arguments.

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

The arguments "a" and "b" are formal argument names that are used in the function body, "return a + b".

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

Revision Source

<h2 id="Summary" name="Summary">大綱</h2>
<p>每個函式在 JavaScript 中都試一個 <code>函式</code> 物件</p>
<h2 id="Syntax" name="Syntax">語法</h2>
<pre class="syntaxbox">
<code>new Function ([<em>arg1</em>[, <em>arg2</em>{{mediawiki.external(', ... <i>argN</i>')}}],] <em>functionBody</em>)</code></pre>
<h3 id="Parameters" name="Parameters">參數</h3>
<dl>
  <dt>
    <code>arg1, arg2, ... arg<em>N</em></code></dt>
  <dd>
    名稱都試用來當做正式的參數名。每一個字串都要是 JavaScript 可接受的字篡,或是一列字串用逗號隔開,例如 "x", "theValue", 或 "a, b"。</dd>
  <dt>
    <code>functionBody</code></dt>
  <dd>
    一串字用來放 JavaScript 敘述包含函式解釋。</dd>
</dl>
<h2 id="Description" name="Description">Description</h2>
<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function and calling it within your code, because functions declared with the function statement are parsed with the rest of the code.</p>
<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p>
<p><strong>Note: </strong>Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always run in the <em>window</em> context (unless the function body starts with a <code>"use strict";</code> statement, in which case the context is <em>undefined</em>).</p>
<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
<h2 id="Example" name="Example">Example</h2>
<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="Properties" name="Properties">Properties</h2>
<div>
  {{Js_see_prototype("Function", "Properties")}}</div>
<p>The global <code>Function</code> object has no methods of its own, however, it does inherit some methods through the prototype chain.</p>
<div>
  {{jsOverrides("Function", "Properties", "prototype")}}</div>
<h2 id="Methods" name="Methods">Methods</h2>
<div>
  {{Js_see_prototype("Function", "Methods")}}</div>
<p>The global <code>Function</code> object has no methods of its own, however, it does inherit some methods through the prototype chain.</p>
<div>
  {{jsOverrides("Function", "Methods")}}</div>
<h2 id="Function_instances" name="Function_instances"><code>Function</code> instances</h2>
<p><code>Function</code> instances inherit from <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype" title="JavaScript/Reference/Global_Objects/Function/prototype"><code>Function.prototype</code></a>. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p>
<h3 id="Function_instance-Properties" name="Function_instance-Properties">Properties</h3>
<div>
  {{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div>
<h3 id="Function_instance-Methods" name="Function_instance-Methods">Methods</h3>
<div>
  {{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div>
<h2 id="Example.3A_Specifying_arguments_with_the_Function_constructor" name="Example.3A_Specifying_arguments_with_the_Function_constructor">Example: Specifying arguments with the <code>Function</code> constructor</h2>
<p>The following code creates a <code>Function</code> object that takes two arguments.</p>
<pre class="brush: js">
// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// &gt; 8</pre>
<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<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 (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/JavaScript/Reference/Operators/function" title="JavaScript/Reference/Operators/Special_Operators/function_Operator">function Operator</a></li>
  <li><a href="/en-US/docs/JavaScript/Reference/Statements/function" title="JavaScript/Reference/Statements/function">function Statement</a></li>
  <li><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions</a></li>
</ul>
Revert to this revision