JavaScript基礎-Function類

概述

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章