JavaScript 函数对象

Question

我编辑了这个问题，使它更有意义。
我有一个需要几个参数的函数 - 我们称之为 fc()。 我将该函数作为参数传递给其他函数（我们称它们为 fa() 和 fb()）。 fc() 传递的每个函数都会向 fc() 添加一个参数。 如何将 fc() 传递给每个函数，而不必单独传递 fc() 的参数？ 下面是我希望它如何工作。

function fa(fc){
   fc.myvar=something
   fb(fc)
}

function fb(fc){
   fc.myothervar=something
   fc()
}

function fc(){
   doessomething with myvar and myothervar
}

下面是我现在的做法。 当我添加参数时，它变得令人困惑，因为我还必须将它们添加到前面的函数中。 fb() 和 fc() 在其他地方使用，我失去了一些灵活性。

function fa(fc){
   myvar=something
   fb(fc,myvar)
}

function fb(fc,myvar){
   myothervar=something
   fc(myvar,myothervar)
}

function fc(myvar,myothervar){
   doessomething with myvar and myothervar
}

感谢您的帮助

---

编辑 3 - 代码

我使用 JimmyP 的解决方案更新了我的代码。 我对 Jason Bunting 的非黑客解决方案感兴趣。 请记住，这些函数中的每一个也可以从其他函数和事件中调用。

从 HTML 页面

<input type="text" class="right" dynamicSelect="../selectLists/otherchargetype.aspx,null,calcSalesTax"/>

加载部分时设置事件处理程序

function setDynamicSelectElements(oSet) {
    /**************************************************************************************
    * Sets the event handlers for inputs with dynamic selects
    **************************************************************************************/
    if (oSet.dynamicSelect) {
        var ySelectArgs = oSet.dynamicSelect.split(',');
        with (oSet) {
            onkeyup = function() { findListItem(this); };
            onclick = function() { selectList(ySelectArgs[0], ySelectArgs[1], ySelectArgs[2]) }
        }
    }
}

onclick 事件构建列表

function selectList(sListName, sQuery, fnFollowing) {
    /**************************************************************************************
    * Build a dynamic select list and set each of the events for the table elements
    **************************************************************************************/
    if (fnFollowing) {
        fnFollowing = eval(fnFollowing)//sent text function name, eval to a function
        configureSelectList.clickEvent = fnFollowing
    }
    var oDiv = setDiv(sListName, sQuery, 'dynamicSelect', configureSelectList); //create the div in the right place
    var oSelected = event.srcElement;
    if (oSelected.value) findListItem(oSelected)//highlight the selected item
}

创建列表 列表的

function setDiv(sPageName, sQuery, sClassName, fnBeforeAppend) {
    /**************************************************************************************
    * Creates a div and places a page in it.
    **************************************************************************************/
    var oSelected = event.srcElement;
    var sCursor = oSelected.style.cursor; //remember this for later
    var coords = getElementCoords(oSelected);
    var iBorder = makeNumeric(getStyle(oSelected, 'border-width'))
    var oParent = oSelected.parentNode

    if (!oParent.id) oParent.id = sAutoGenIdPrefix + randomNumber()//create an ID
    var oDiv = document.getElementById(oParent.id + sWindowIdSuffix)//see if the div already exists
    if (!oDiv) {//if not create it and set an id we can use to find it later
        oDiv = document.createElement('DIV')
        oDiv.id = oParent.id + sWindowIdSuffix//give the child an id so we can reference it later    
        oSelected.style.cursor = 'wait'//until the thing is loaded
        oDiv.className = sClassName
        oDiv.style.pixelLeft = coords.x + (iBorder * 2)
        oDiv.style.pixelTop = (coords.y + coords.h + (iBorder * 2))
        XmlHttpPage(sPageName, oDiv, sQuery)
        if (fnBeforeAppend) {
            fnBeforeAppend(oDiv)
        }
        oParent.appendChild(oDiv)
        oSelected.style.cursor = ''//until the thing is loaded//once it's loaded, set the cursor back
        oDiv.style.cursor = ''
    }
    return oDiv;
}

位置和大小

function configureSelectList(oDiv, fnOnClick) {
    /**************************************************************************************
    * Build a dynamic select list and set each of the events for the table elements
    * Created in one place and moved to another so that sizing based on the cell width can
    * occur without being affected by stylesheet cascades
    **************************************************************************************/
    if(!fnOnClick) fnOnClick=configureSelectList.clickEvent
    if (!oDiv) oDiv = configureSelectList.Container;
    var oTable = getDecendant('TABLE', oDiv)
    document.getElementsByTagName('TABLE')[0].rows[0].cells[0].appendChild(oDiv)//append to the doc so we are style free, then move it later
    if (oTable) {
        for (iRow = 0; iRow < oTable.rows.length; iRow++) {
            var oRow = oTable.rows[iRow]
            oRow.onmouseover = function() { highlightSelection(this) };
            oRow.onmouseout = function() { highlightSelection(this) };
            oRow.style.cursor = 'hand';
            oRow.onclick = function() { closeSelectList(0); fnOnClick ? fnOnClick() : null };
            oRow.cells[0].style.whiteSpace = 'nowrap'
        }
    } else {
        //show some kind of error
    }
    oDiv.style.width = (oTable.offsetWidth + 20) + "px"; //no horiz scroll bars please
    oTable.mouseout = function() { closeSelectList(500) };
    if (oDiv.firstChild.offsetHeight < oDiv.offsetHeight) oDiv.style.height = oDiv.firstChild.offsetHeight//make sure the list is not too big for a few of items
}

Answer 1

好吧，那么 - 从哪里开始呢？ :) 这是开始的部分函数，​​你将需要这个（现在和将来，如果你花很多时间破解 JavaScript）：

function partial(func /*, 0..n args */) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var allArguments = args.concat(Array.prototype.slice.call(arguments));
    return func.apply(this, allArguments);
  };
}

我看到你的代码中有很多让我感到畏缩的东西，但因为我没有时间真正批评它，而且你也没有要求它，如果你想摆脱你当前正在使用的黑客，我会建议以下内容，以及其他一些东西：

setDynamicSelectElements()

函数 在此函数中，您可以更改这一行：

onclick = function() { selectList(ySelectArgs[0], ySelectArgs[1], ySelectArgs[2]) }

对此：

onclick = function() { selectList.apply(null, ySelectArgs); }

selectList() 函数

在此函数中，您可以删除使用 eval 的代码 - 永远不要使用 eval ，除非您有充分的理由这样做，这是非常危险的（去阅读它）：

if (fnFollowing) {
   fnFollowing = eval(fnFollowing)
   configureSelectList.clickEvent = fnFollowing
}

并使用这个：

if(fnFollowing) {
   fnFollowing = window[fnFollowing]; //this will find the function in the global scope
}

然后，更改这一行：

var oDiv = setDiv(sListName, sQuery, 'dynamicSelect', configureSelectList);

为此：

var oDiv = setDiv(sListName, sQuery, 'dynamicSelect', partial(configureSelectListAlternate, fnFollowing));

现在，在我提供的代码中，我有“configureSelectListAlternate” - 这是一个与“相同的函数” configureSelectList”，但参数的顺序相反 - 如果您可以将参数的顺序反转为“configureSelectList”，请执行此操作，否则这是我的版本：

function configureSelectListAlternate(fnOnClick, oDiv) {
   configureSelectList(oDiv, fnOnClick);
}

configureSelectList() 函数

在此函数中，您可以消除这一行：

if(!fnOnClick) fnOnClick=configureSelectList.clickEvent

不再需要那个了。 现在，我看到一些我不明白的东西：

if (!oDiv) oDiv = configureSelectList.Container;

我没有看到您在任何其他代码中挂钩该 Container 属性。 除非你需要这条线，否则你应该能够摆脱它。

setDiv() 函数可以保持不变。

---

不太令人兴奋，但你明白了 - 你的代码确实需要一些清理 - 你是否避免使用像 jQuery 或 MochiKit 有充分的理由吗？ 这会让你的生活变得更加轻松......

Answer 2

函数的属性不能作为局部作用域中的变量使用。 您必须将它们作为属性来访问。 因此，在“fc”中，您可以通过以下两种方式之一访问“myvar”：

// #1
arguments.callee.myvar;
// #2
fc.myvar;

都可以......

Answer 3

尝试继承 - 通过传递您的任何对象作为参数，您可以访问内部的任何变量，例如：

function Obj (iString) { // Base object
    this.string = iString;
}
var myObj = new Obj ("text");

function InheritedObj (objInstance) { // Object with Obj vars
    this.subObj = objInstance;
}
var myInheritedObj = new InheritedObj (myObj);

var myVar = myInheritedObj.subObj.string;
document.write (myVar);

subObj 将采用 myObj 的形式，因此您可以访问内部的变量。

Answer 4

也许您正在寻找 < strong>部分函数应用，或者可能柯里化？

以下引用自关于差异的博客文章 :

部分应用程序采用一个函数，并从中构建一个采用较少参数的函数，而柯里化则通过组合每个采用单个参数的函数来构建采用多个参数的函数。

如果可能的话，如果您可以简化您的示例和/或提供实际的 JS 代码而不是伪代码，这将有助于我们帮助您。