Javascript_javascript スキルにおけるメソッドチェーンの概要

JavaScript API を設計する方法を探していたときに、メソッド チェーンを発見しました。メソッド チェーンは非常に強力で興味深いもので、これまでよく目にしたものです。 。

JavaScript メソッドチェーン

ウィキペディアには次のような説明があります:

コードをコピー コードは次のとおりです:

メソッド チェーン (名前付きパラメータ イディオムとも呼ばれます) は、オブジェクト指向プログラミング言語で複数のメソッド呼び出しを呼び出すための一般的な構文で、各メソッドがオブジェクトを返し、呼び出しを 1 つのステートメント内でチェーンすることができます。中間変数の必要性は、メソッド間に改行が追加されることがよくありますが、より多くのメソッドが連鎖すると、同じ行に次々と来るメソッドの数が増加するため、「列車事故」とも呼ばれます。メソッド。

翻訳ツールを使用して翻訳してください:

コードをコピーします コードは次のとおりです:

メソッド チェーン (名前付きパラメーター メソッドとも呼ばれます) は、オブジェクト指向プログラミング言語で複数のメソッドを呼び出すための一般的な構文です。各メソッドはオブジェクトを返すため、呼び出しを 1 つの宣言で結合できます。リンクは糖衣構文であり、中間変数が不要です。メソッドチェーンは、通常はメソッド間に改行が追加される場合でも、複数のメソッドがロックインされるため、同じ行に次々に来るメソッドの数が増加するため、列車事故としても知られています。

を使用したメソッドチェーン

目視検査によると、おそらく jQuery が最も使用されているメソッド チェーンです。

コードをコピー コードは次のとおりです:

// 連鎖
$("#person").slideDown('slow')
.addClass('グループ化')
.css('margin-left', '11px');

このような使い方でこれを呼び出すことができます。 jQuery はリンクに大きく依存します。これにより、同じセレクターの複数のメソッドを簡単に呼び出すことができます。これにより、コードがすっきりし、同じ選択を何度も実行することがなくなります (パフォーマンスが向上します)。メソッドチェーンがない場合は以下のようになります

コードをコピー コードは次のとおりです:

var p = $('#person');
p.slideDown('遅い');
p.addClass('グループ化');
p.css('margin-left', '11px');

デザイン パターンのビルダーと非常によく似ていますが、違いは、ここでの p がクラスではなくメソッドであることです。

JavaScript メソッドチェーンの例

以前 JavaScript の高階関数 について話したときに、print('Hello')('World') について話しましたが、この使用法の結果は次のようになります。

コードをコピー コードは次のとおりです:

関数 f(i){
return 関数(e){
i =e;
戻り関数(e){
i =e;
戻り関数(e){
アラート(i e);
};
};
};
};
f(1)(2)(3)(4); //10

これはインターネット上の例ですが、私がチェーン コールを作成したのもこれが最後でした。非常に弱そうに見えます。

コードをコピー コードは次のとおりです:

var func = (function() {
Return{
          add: function () {
console.log('1');
            return{
result: function () {
console.log('2');
                }
            }
}
}
})();

func.add().result();

In fact, there should be a return this in every function, so there is:

Copy code The code is as follows:

Func = (function() {
This.add = function(){
console.log('1');
         return this;
};
This.result = function(){
console.log('2');
         return this;
};
Return this;
});

var func = new Func();
func.add().result();

Of course we can also replace the last two sentences

Copy code The code is as follows:

var func = new Func();
func.add().result();

Become

Copy code The code is as follows:

new Func().add().result();

Others

Finally, a little comparison as a confusing place:

Method Chaining VS prototype Chaining

The prototype chain and the method chain are similar in some aspects, but the difference may be

1. The prototype chain requires the use of prototypes
2. Method chain uses method