The Function
constructor creates a new Function
object. In JavaScript every function is actually a Function
object.
gge
Syntax
new Function ([arg1[, arg2[, ...argN]],] functionBody)
Parameters
arg1, arg2, ... argN
- Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "
x
", "theValue
", or "a,b
". functionBody
- A string containing the JavaScript statements comprising the function definition.
Description
Function
objects created with the Function
constructor are parsed when the function is created. This is less efficient than declaring a function with a function expression or function statement and calling it within your code, because such functions 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 are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function
constructor was called. This is different from using eval
with code for a function expression.
Invoking the Function
constructor as a function (without using the new
operator) has the same effect as invoking it as a constructor.
Properties and Methods of Function
The global Function
object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from Function.prototype
.
Function
prototype object
Properties
Function.prototype.arguments
- An array corresponding to the arguments passed to a function.
This is deprecated as a property ofFunction
. Use thearguments
object (available within the function) instead. Function.arity
Used to specifiy the number of arguments expected by the function, but has been removed. Use thelength
property instead.Function.prototype.caller
- Specifies the function that invoked the currently executing function.
This property is deprecated, and is only functional for some non-strict functions. Function.prototype.length
- Specifies the number of arguments expected by the function.
Function.prototype.name
- The name of the function.
Function.displayName
- The display name of the function.
Function.prototype.constructor
- Specifies the function that creates an object's prototype.
SeeObject.prototype.constructor
for more details.
Methods
Function.prototype.apply(thisArg [, argsArray])
- Calls a function and sets its
this
to the providedthisArg
. Arguments can be passed as anArray
object. Function.prototype.bind(thisArg[, arg1[, arg2[, ...argN]]])
- Creates a new function which, when called, has its
this
set to the providedthisArg
. Optionally, a given sequence of arguments will be prepended to arguments provided the newly-bound function is called. Function.prototype.call()
- Calls a function and sets its
this
to the provided value. Arguments can be passed as they are. Function.prototype.isGenerator()
- Returns
true
if the function is a generator; otherwise returnsfalse
. Function.prototype.toSource()
- Returns a string representing the source code of the function.
Overrides theObject.prototype.toSource
method. Function.prototype.toString()
- Returns a string representing the source code of the function.
Overrides theObject.prototype.toString
method.
Function
instances
Function
instances inherit methods and properties from Function.prototype
. As with all constructors, you can change the constructor's prototype object to make changes to all Function
instances.
Examples
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
".
A recursive shortcut to massively modify the DOM
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>
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. Implemented in JavaScript 1.0. |
ECMAScript 5.1 (ECMA-262) The definition of 'Function' in that specification. |
Standard | |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Function' in that specification. |
Standard | |
ECMAScript Latest Draft (ECMA-262) The definition of 'Function' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |