概述
Function繼承Object類
Function
構造器創建一個新的Function
對象. 在JavaScript中每個函數(function)實際是一個Function對象
.
構造器
new Function ([arg1[, arg2[, ...argN]],] functionBody)
//或者
function funcName() {}
//或者
var fn = function() {};
參數
參數1, 參數2, ... 參數N
- 被函數使用的參數的名稱必須是合法命名的。參數名稱是一個有效的JavaScript標識符的字符串,或者一個用逗號分隔的有效字符串的列表;例如“×”,“theValue”,或“A,B”。
- 函數體
- 一個含有包括函數定義的JavaScript語句的字符串。
描述
使用Function構造器生成的
Function對象是在函數創建時被解析的。這比你使用函數聲明(function)並在你的代碼中調用低效,因爲使用函數語句聲明的function是跟其他語句一起解析的
。
所有被傳遞到構造函數中的參數,都將被視爲將被創建的函數的參數,並且是相同的標示符名稱和傳遞順序。
以調用函數的方式調用Function的構造函數 (不是用new關鍵字) 跟以構造函數來調用是一樣的.
Function的屬性和方法
全局的Function對象沒有自己的屬性和方法, 但是, 因爲它本身也是函數,所以它也會通過原型鏈從Function.prototype
上繼承部分屬性和方法。
Function的原型
屬性
Function.length
- 傳入function中的參數個數
方法
Function的實例
Function
實例從
Function.prototype
繼承了一些屬性和方法。 跟所有的構造函數一樣, 你可以通過改變構造函數的原型對所有的Function實例的屬性和方法進行更改。
例子
例子: 傳入參數調用Function構造函數
下面的代碼會創建一個需要兩個參數的Function對象
// 可以直接運行在 JavaScript 控制的代碼例子
// 創建了一個能返回兩個參數和的函數
var adder = new Function("a", "b", "return a + b");
// 調用函數
adder(2, 6);
// > 8
<!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>