Function
构造函数 创建一个新的Function对象。 在 JavaScript 中, 每个函数实际上都是一个Function对象。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
new Function ([arg1[, arg2[, ...argN]],] functionBody)
使用Function构造器生成的
Function对象是在函数创建时解析的。这比你使用函数声明或者函数表达式(function)并在你的代码中调用更为低效,因为使用后者创建的函数是跟其他代码一起解析的
。
所有被传递到构造函数中的参数,都将被视为将被创建的函数的参数,并且是相同的标示符名称和传递顺序。
注意: 使用Function构造器生成的函数,并不会在创建它们的上下文中创建闭包;它们一般在全局作用域中被创建。当运行这些函数的时候,它们只能访问自己的本地变量和全局变量,不能访问Function构造器被调用生成的上下文的作用域。这和使用带有函数表达式代码的 eval
不同。
以调用函数的方式调用Function的构造函数 (不是用new关键字) 跟以构造函数来调用是一样的.
全局的Function对象没有自己的属性和方法, 但是, 因为它本身也是函数,所以它也会通过原型链从Function.prototype
上继承部分属性和方法。
Function.arguments
arguments
替代。Function.arity
length
属性代替。Function.caller
Function.length
Function.name
Function.displayName
Function.prototype.constructor
Object.constructor
。Function.prototype.apply()
Function.prototype.bind()
Function.prototype.call()
Function.prototype.isGenerator()
若函数对象为
generator,返回true,反之返回 false
。Function.prototype.toSource()
Object.prototype.toSource
方法。Function.prototype.toString()
Object.prototype.toString
方法。Function
实例从 Function.prototype
继承了一些属性和方法。 同其他构造函数一样, 你可以改变构造函数的原型从而使得所有的Function实例的属性和方法发生改变。
下面的代码会创建一个需要两个参数的Function对象
// 可以直接运行在 JavaScript 控制的代码例子
// 创建了一个能返回两个参数和的函数
const adder = new Function("a", "b", "return a + b");
// 调用函数
adder(2, 6);
// 8
参数"a"和"b"是参数的名字,在函数体中被使用,"return a + b
"。
// 1、f()函数返回的function e()是闭包.
var n = 1;
function f(){
var n = 2;
function e(){
return n;
}
return e;
}
console.log (f()()); //2
// 2、f()函数返回的function e()是全局作用域函数
var n = 1;
function f(){
var n = 2;
var e = new Function("return n;");
return e;
}
console.log (f()()); //1
使用 Function 构造器创建函数是从一个函数中动态地创建一些不确定数量的有可执行代码的在全局范围里可用的新对象的方式之一。在下面的例子中,如果你不想使用闭包,那么每创建一个新的查询函数都不可避免地要调用 Function 构造器。
<!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>
Specification | Status | Comment |
---|---|---|
ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. Implemented in JavaScript 1.0. |
ECMAScript 5.1 (ECMA-262) Function |
Standard | |
ECMAScript 2015 (6th Edition, ECMA-262) Function |
Standard |
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) |
Functions and function scope
Function
function statement
function expression
function* statement
function* expression
GeneratorFunction