JavaScript で関数チェーンを効果的に適用するにはどうすればよいですか?

JavaScript での基本的なオブジェクトと関数のチェーンの実装

チェーン操作には、複数の関数呼び出しを連続的に接続することが含まれ、開発者が一連の関数を実行できるようにします。オブジェクトまたはデータに対するアクションのこと。 JavaScript の関数チェーンの基礎を理解することで、この強力なテクニックを効果的に活用できます。

関数チェーンの基礎

1. 次を返します: これを返す各関数により、一連の操作を続行できます。
2. ネストされた関数: チェーン可能な関数は通常、親オブジェクトまたは関数内に存在します。
3. 親関数戻り値: 親関数は、それ自体または新しいインスタンスを返す必要があります。

実際の例:

次の例を考えてみましょう:

<code class="javascript">var one = function(num){
    this.oldnum = num;

    this.add = function(){
        this.oldnum++;
        return this;
    }

    if(this instanceof one){
        return this.one;    
    }else{
        return new one(num);    
    }
}

var test = one(1).add().add();</code>

ここで、one 関数は初期値を持つオブジェクトと、値をインクリメントする add メソッドを作成します。 add メソッドからこれを返すことで、シーケンスが続行されます。

壊れた例:

ただし、次の例は機能しません:

<code class="javascript">var gmap = function(){

    this.add = function(){
        alert('add');

        return this;    
    }   

    if(this instanceof gmap) {
        return this.gmap;   
    } else{
        return new gmap();  
    }

}

var test = gmap.add();</code>

ここでの問題は、this が wi​​ndow オブジェクトを参照している、つまり連鎖がないという事実にあります。これを修正するには、次のように関数をオブジェクトにラップします。

<code class="javascript">var gmap = function() {
    this.add = function() {
        alert('add');
        return this;
    }

    this.del = function() {
       alert('delete');
       return this;
    }

    if (this instanceof gmap) {
        return this.gmap;
    } else {
        return new gmap();
    }
}

var test = new gmap();
test.add().del();</code>

関数の連鎖について

連鎖関数は、複数の関数を実行するための便利で読みやすい方法を提供します。オブジェクトまたはデータ構造に対するアクション。これを各関数から返すことで、開発者は順番に実行される一連の操作を作成できます。

以上がJavaScript で関数チェーンを効果的に適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。