在javascript中為函數分配函數？

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或下划線，則可以使用與.bind不同的_.partial() ，因為它不需要第一個參數，也不會重新綁定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在初始化setFoo時undefined （從而調用genericSetFoo() ），因此當window.localStorage.setItem(name, value)嘗試使用傳遞給其value參數的參數時，會收到undefined錯誤。