Question

我曾经有类似以下内容......

var setFoo = function (value1) {
    window.localStorage.setItem('foo1', value1);
}

var setFoo2 = function (value2) {
    window.localStorage.setItem('foo2', value2);
}

然而，我发现我一直在做...

window.localStorage.setItem('something', value);

...所以我决定把它变成一个函数......

function genericSetFoo(name, value) {
    window.localStorage.setItem(name, value);
}

...而是改为......

var setFoo = genericSetFoo('foo1', value1);
var setFoo2 = genericSetFoo('foo2', value2);

...但是，现在当我尝试拨打setFoo1(value1)或setFoo2(value2)时，应用程序会抱怨value1和value2为undefined。我究竟做错了什么？我的意思是我还能做......

var setFoo = function(value1) { genericSetFoo('foo1', value1) };
var setFoo2 = function(value2) { genericSetFoo('foo2', value2) };

......它也有效......但如果我不得不在任何情况下重新定义这个功能，它就会失败。那么我该如何解决这个问题？

Answer 1

在这种情况下，您可以使用.bind()。这种技术被称为“部分功能评估”：

var setFoo = genericSetFoo.bind(null, 'foo1');
var setFoo2 = genericSetFoo.bind(null, 'foo2');

setFoo(value1);

如果您使用的是lodash或下划线，则可以使用与_.partial()不同的.bind，因为它不需要第一个参数，也不会重新绑定this值：

var setFoo = _.partial(genericSetFoo, 'foo1');
var setFoo2 = _.partial(genericSetFoo, 'foo2');

Answer 2

我做错了什么？

您正在调用window.localStorage.setItem()而不是返回调用window.localStorage.setItem()的函数。请记住，当您调用函数并将其分配给变量时，您将指定该函数的返回值，而不是函数本身。

例如，当你这样做时：

function a () { return 2 };

var two = a();

..您希望变量two是2还是函数？另一个例子，如果你这样做：

var x = document.getElementById('foo');

..您希望变量x包含DOM元素还是函数？

因此，您需要返回一个函数而不是调用函数：

function genericSetFoo(name) {
    return function (value) {
        window.localStorage.setItem(name, value);
    }
}

现在你可以这样做：

var setFoo1 = genericSetFoo('foo1');

Answer 3

我做错了什么？

当你这样做时：

var setFoo = genericSetFoo('foo1', value1);

您正在调用genericSetFoo()并将其返回的值分配给setFoo。但是，由于value1在初始化undefined时setFoo（从而调用genericSetFoo()），因此undefined尝试window.localStorage.setItem(name, value)时出现value错误使用传递给其.uiModalContent { background: #ffffff; width: 900px; height: 550px; position: relative; overflow: auto; padding: 20px; border: #222222 1px solid; }参数的参数。

在javascript中为函数分配函数？

3 个答案: