オブジェクト結合機能の実装方法

はじめに

jQueryの$.extend()はよく使われるツール関数で、主にパラメータ（オブジェクト）をマージするために使用されます。具体的な使い方はここでは詳しく説明しません。マージ処理中にディープコピーを使用するかどうかを制御できます。 ES2015 の新しい Object.assign() メソッドでもオブジェクトのマージを実現できますが、この記事ではオブジェクトをマージする jQuery の extend メソッドのソース コードを参照しています。つまり、複数のオブジェクトのプロパティをターゲット オブジェクトにコピーします。同じ属性を持つ場合、後のオブジェクトが前のオブジェクトを上書きします。

浅いコピーによるオブジェクトのマージの実現

オブジェクトと配列の深いコピーと浅いコピーについては、以前のブログ投稿で詳しく紹介しましたので、理解できない場合は、こちらを読んでください。まず実装を見てから説明しましょう

    function extend() {  //extend 浅拷贝实现
      var name,options,copy,
          length = arguments.length,
          i = 1,
          target = arguments[0] || {};  //取目标对象
      
    if([&#39;object&#39;,&#39;function&#39;].indexOf(typeof target) < 0){
        target = {};
      }    

      for(;i<length;i++){

        options = arguments[i]        
        if(options != null){  //排除空参数的情况 extend({},,)

          for(name in options){   //遍历对象 赋值
            copy = options[name];            
            if (copy !== undefined) {
              target[name] = copy;
            }
          }
        }
      }      return target  
    }   //测试数据 
    var test1 = {
      a : 1,
      b : {
        c : 2,
        d : 3
      },
      e : [1,&#39;a&#39;]
    },
    test2 = {
      b : {
        c : 4,
        d : 5,
        f : 6
      },
      e : [1,&#39;a&#39;],
      g : 7
    }    var test = extend({},test1,test2);
    console.log(test.b.d);   //5
    test2.b.d = &#39;x&#39;;  //修改test2
    console.log(test.b.d);  // &#39;x&#39;   test随之修改

アイデアは次のとおりです:

1. デフォルトでは、最初のパラメータがオブジェクトデータ型ではない場合、最初のパラメータがターゲットオブジェクトとして取得されます。 value は空のオブジェクトに割り当てられます

2. 残りのパラメータ (ソース オブジェクト) をトラバースし、ソース オブジェクトのプロパティをターゲット オブジェクトにコピーします。

3. マージ結果としてターゲットオブジェクトを返します

2番目のステップでは、ソースオブジェクトの属性値はすべて「=」を使用して割り当てられるため、ソースオブジェクトの属性値が. object 属性、copy あくまで参考値であり、浅いコピー方法です。 テスト結果から、test と test2 の b 属性の属性値は同じオブジェクトを使用しており、相互に影響を与えることがわかります。 。これを理解すると、マージ中にディープ コピーを実装する方法についてもアイデアが得られるはずです。

ディープコピーを使用したオブジェクトのマージ

ソースオブジェクトの属性値をコピーする場合、値の型を決定する必要があります。オブジェクトデータ型の場合は、extend関数を再帰的に呼び出します。次に、オブジェクトマージのディープコピー方法を練習します。実装は次のとおりです:

    function extend() {  //extend 深拷贝实现
      var name,options,src,copy,
          deep = false,  //是否深拷贝 默认为false
          length = arguments.length,
          i = 1,
          target = arguments[0] || {};      //如果第一个参数为boolean类型,赋值给deep
      if(typeof target  == 'boolean'){
        deep = arguments[0];
        target = arguments[i] || {}; //目标对象顺延
        i++;
      }      //如果target不是对象数据类型的话  target赋值为 {}
      if([&#39;object&#39;,&#39;function&#39;].indexOf(typeof target) < 0){
        target = {};
      }      for(;i<length;i++){

        options = arguments[i];        
        if(options != null){          
        for(name in options){

            copy = options[name];
            src = target[name];            
            if(target === copy){  //避免重复循环
              continue;
            }            if(deep && copy && (typeof copy == &#39;object&#39;)){ // 类型判断
              src = Object.prototype.toString.call(copy) == &#39;[object Array]&#39; ? [] : {};  //区分数组和‘对象’
              target[name] = extend(deep,src,copy);
            }else {              
            if (copy !== undefined) {

                target[name] = copy;
              }
            }
          }
        }
      }      return target
    }

1.パラメータ判定、最初のパラメータがブール型の場合、それを深層にコピーするかどうかを制御するパラメータとみなされます。 deep copy, deep のデフォルトは同時に false になります。ターゲット要素は 2 番目のパラメータになります

2. 属性値をコピーする場合、deep が true の場合は deep パラメータと属性値の型を決定する必要があります。 value がオブジェクト型である場合は、再帰的に extend 関数を呼び出し、それ以外の場合は値を直接割り当てます

3. 対象オブジェクトのプロパティに異なる初期値を割り当てるには、配列と「オブジェクト」を区別する必要があります。全て{}の場合、対象要素にコピーされた配列型の属性値は、{'0':xx, '1': xx...}になります

結論

これまでは$.extendを直接使ってきました() は使いやすいですが、実装についてはあまり明確ではありません。I* の実装は厳密ではないかもしれませんが、利益はかなり良いと思います。

以上がオブジェクト結合機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。