JavaScriptでオブジェクトをクローンする方法。

JavaScriptでオブジェクトをclone(ディープコピー)する方法を紹介する。

例えば、WebアプリのUIを作っていて、特定のタグ要素群を纏めてディープコピーしたいことも多々あるだろう。しかし、JavaScriptの標準APIではそれが実現出来ないようなので、今回はdankogai氏が作成した clone.js を利用させてもらった。

以下はサンプルコードだ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="clone.js"></script>
<script type="text/javascript"><!--
$(function() {
  // ディープコピーボタンクリック
  $("#deepcopyBtn").click(function(){
    // クローン生成
    clonedTag = $("#div_src p").clone();
    // 貼り付け
    $("#div_dst").append(clonedTag);
  });
  
  // シャローコピーボタンクリック
  $("#shallowcopyBtn").click(function(){
    // タグの参照を取得
    tag = $("#div_src p");
    // 貼り付け(というか移動)
    $("#div_dst").append(tag);
  });
});
--></script>

<p>↓コピー元</p>
<div id="div_src">
<p ><b>ほげ。</b></p>
</div>

<p>↓コピー先</p>
<div id="div_dst"></div>

<button id="deepcopyBtn">ディープコピー</button>
<button id="shallowcopyBtn">シャローコピー</button>

実際に試してみよう。

↓コピー元

ほげ。

↓コピー先

ディープコピー シャローコピー

clone.js を読み込み、object.clone() するだけ。

このように clone.js を使えば、かくも簡単にオブジェクトのクローンが実現できるのだ。dankogai氏に感謝である。

それにしても、JavaScriptの標準APIに clone が実装されていないのが不思議でならない。

ここはひとつポチっとよろしく。

JavaScript本格入門　〜モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 11.06.29

山田 祥寛
技術評論社
売り上げランキング: 1260

Amazon.co.jp で詳細を見る