web-dev-qa-db-ja.com

JavaScriptで連鎖可能な関数を作成するにはどうすればよいですか？

このような機能を想像してみましょう：

function foo(x) {
    x += '+';
    return x;
}

それの使用法は次のようになります：

var x, y;
x = 'Notepad';
y = foo(x);
console.log(y); // Prints 'Notepad+'.

他の関数と連鎖できる関数を作成する方法を探しています。

使用法を想像してみてください。

var x, y;
x = 'Notepad';
y = x.foo().foo().toUpperCase(); // Prints 'NOTEPAD++'.
console.log(y);

どうすればよいですか？

javascriptfunctionreturnchainchainable
21
daGrevis

確かに、トリックは、オブジェクトの変更が完了したら、オブジェクトを返すことです。

String.prototype.foo = function() {
    return this + "+";
}

var str = "Notepad";
console.log(str.foo().foo().toUpperCase());

http://jsfiddle.net/Xeon06/vyFek/

メソッドをStringで利用できるようにするために、プロトタイプを変更しています。ただし、Objectでこれを行わないように注意してください。プロパティを列挙するときに、問題が発生する可能性があります。

21
Alex Turpin

私の記憶が正しければ、「this」を関数（それが属するオブジェクト）のコンテキストとして使用し、それを返して関数をチェーン可能にすることができます。言い換えると：

_var obj = 
{
    f1: function() { ...do something...; return this;},
    f2: function() { ...do something...; return this;}
}
_

次に、obj.f1().f2()のように呼び出しを連鎖させることができます

Obj.f1（）。toUpperCase（）を呼び出しても期待どおりの結果が得られないことに注意してください。f1（）を実行し、「this」を返し、obj.toUpperCase（）を呼び出そうとします。

8
Andrey