JavaScript でのディープ クローン オブジェクトの詳細な説明と例

JavaScript ディープ クローン オブジェクト

今日、私はプロジェクトに取り組んでいて、ディープ クローン オブジェクトを使用する必要があり、プロトタイプ チェーンでのプログラミングが必要だったので、思いつきでこのナレッジ ポイントを確認することにし、対応するものを見つけました。インターネット上の知識、

オブジェクトのクローン、この用語は派手に見えるかもしれませんが、実際にはまったく同じように見えるオブジェクトをコピーするだけです。とても簡単ではないかと思っている人もいるかもしれません

var obj1 = {name: 'payen'};
var obj2 = obj1;

。 obj1 はオブジェクトのクローンではありません。基本的には obj2 と同じオブジェクトです

それらは同じメモリアドレス空間を指し、同じ小さな家を取得します

これは、オブジェクトが参照値であるためです

参照値と言えば

JavaScript 参照値は単なるオブジェクトです

ここで、配列は特別なオブジェクトであり、関数も特別な実行可能なオブジェクトである、つまり、いわゆるディープオブジェクトでもあることに注意してください。クローンオブジェクトは、同じ家が必要ないことを意味します。私が言っていることが理解できるかどうかわかりません=￣ω￣=、つまり、 の基準値です。ディープ クローン オブジェクトはコピーする必要がありますが、対応するシャロー クローン オブジェクトは参照値を取得するだけで済みます。理解できなくても問題ありません。コードを読めば理解できます

まず、見てみましょう。浅いクローン オブジェクト

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true
  }
}
function easyClone(obj){
  var newObj = {};
  for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
      newObj[prop] = obj[prop];
    }
  }
  return newObj;
}
var newHouse = easyClone(house);

私が easy を使っていることに文句を言わないでください。「浅い」を英語でどう言うか思い出せません (本当に) どうやって CET-6 に合格したかわかりません)。 for-in についてはパフォーマンスに小さな問題がありますので、興味があれば、私の他の記事を読んでください

このコードは非常に簡単なので、これ以上説明しません

Chrome コンソールを見てみましょう。

素敵ですね

それでは、今から一つやらせてください

新しい家に人を追加してください

この「新しい家」は新しいものではないようです、混同しないでください変数名 したがって、参照値が表示されると、シャロークローンは使いにくくなります。この場合、新しいオブジェクトを取得したいので、新しいオブジェクトを作成し、古いオブジェクトの内容をコピーします。オブジェクトへの新しいオブジェクトはありませんか?

オブジェクト内にまだオブジェクトがある場合はどうなるでしょうか? それから、作成と追加のプロセスが繰り返されます

。

ただし、ループには 2 種類あります

反復

再帰

再帰の方が優れているのは間違いありません

再帰ループでは、終了条件を満たす条件が見つかると、層ごとに戻って終了します. その後、再帰を使用して参照値がなくなるまで階層ごとに参照値を見つけることができます

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
function deepClone(original, target){
  var target = target || {};// 如果target为undefined或没传参，设置空对象
  for(var prop in original){// 遍历原对象
    if(original.hasOwnProperty(prop)){// 只拷贝对象内部，不考虑原型链
      if(typeof original[prop] === 'object'){// 引用值
        if(Object.prototype.toString.call(original[prop]) === '[object Array]'){
          target[prop] = [];// 处理数组引用值
        }else{
          target[prop] = {};// 处理对象引用值
        }// 可以用三目运算符
        deepClone(original[prop],target[prop]);// 递归克隆
      }else{// 基本值
        target[prop] = original[prop];
      } 
    }
  }
  return target;
}
var newHouse = deepClone(house);

三項演算子を使用するのに適していると書かれています。しかし、冗長すぎると感じ、強迫性障害の私は、それを読んだ後不快に感じたと言いました。ディープクローンが真実であることを証明するために、元の家を意図的により複雑にしました（ディープクローンは考慮していません）面倒であまり意味のない関数ですが、今回は本当に新しい家です

拡張はしません

見ていただけます。新しいオブジェクトの基準値が変更されているようですが、古いオブジェクトは変更されていません。

プロトタイプ チェーンでのプログラミングも同様です

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
Object.prototype.cloneTo = function(obj){
  var obj = obj || {};
  for(var prop in this){
    if(this.hasOwnProperty(prop)){
      if(typeof this[prop] === 'object'){
        if(Object.prototype.toString.call(this[prop]) === '[object Array]'){
          obj[prop] = [];
        }else{
          obj[prop] = {};
        }
        this[prop].cloneTo(obj[prop]);
      }else{
        obj[prop] = this[prop];
      }
    }
  }
  return obj;
}
var newHouse = {};
house.cloneTo(newHouse);

上記は、JavaScript ディープ クローン オブジェクトの詳細な説明と例です。詳細については、PHP 中国語 Web サイトを参照してください。 (www.php.cn)!