jQuery.extend()

jQuery.extend()は、複数のオブジェクトをマージ(併合)するメソッドである。

構文

window.jQuery.extend(target [,object]...)

jQuery.extend(target [,object]...)

$.extend(target [,object]...)

window.jQuery.extend([deep,] target, object [,object]...)

jQuery.extend([deep,] target, object [,object]...)

$.extend([deep,] target, object [,object]...)

target

マージ先のオブジェクトを指定する。

object

マージするオブジェクトを指定する。

deep

trueを指定した場合、マージは再帰的になる(ディープコピー)。falseを指定した場合、マージは再帰的にならない(シャローコピー)。

戻り値

マージ結果のオブジェクトを返す。

JavaScriptのオブジェクトをマージする

<script>
  var obj1 = { foo: 1, bar: 2 };
  var obj2 = { baz: 3, qux: "quux" };

  $.extend(obj1, obj2);

  for (key in obj1) {
    document.writeln(key + "=" + obj1[key]);
  }
</script>

上記スクリプトの実行結果を次に示す。

引数に渡したオブジェクトの内容を変更されたくない場合、第1引数に空のオブジェクトを渡して、マージ結果は戻り値で取得する。

<script>
  var obj1 = { foo: 1, bar: 2 };
  var obj2 = { baz: 3, qux: "quux" };
  var obj3 = $.extend({}, obj1, obj2);

  for (key in obj3) {
    document.writeln(key + "=" + obj3[key]);
  }
</script>

JavaScriptのオブジェクトをコピーする

jQuery.extend()は、JavaScriptのオブジェクトをコピーするのにも利用できる。JavaScriptにおいて、var obj2 = obj1;はオブジェクトのコピーではなく、オブジェクトの参照になる。オブジェクト参照のサンプルを示す。

var obj1 = { foo: "old" };
var obj2 = obj1;

document.writeln('<p>obj2.foo = ' + obj2.foo + '</p>');
obj1.foo = "new";
document.writeln('<p>obj2.foo = ' + obj2.foo + '</p>');

上記サンプルの実行結果を示す。

上記のサンプルでは、 obj1 の内容を変更すると、 obj2 の内容も変わっている。 obj2 = jQuery.extend({}, obj1) とすることでオブジェクトをコピーすることができる。

var obj1 = { foo: "old" };
var obj2 = jQuery.extend({}, obj1);

document.writeln('<p>obj2.foo = ' + obj2.foo + '</p>');
obj1.foo = "new";
document.writeln('<p>obj2.foo = ' + obj2.foo + '</p>');

上記サンプルの実行結果を示す。

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

シャローコピー(浅いコピー)とは、オブジェクト内に含まれるオブジェクトはコピーではなく参照となるコピーである。ディープコピー(深いコピー)とは、オブジェクト内に含まれるオブジェクトもコピーすることである。

jQuery.extend()のデフォルトのコピー方法はシャローコピーである。 jQuery.extend(true, ...) とすることで、ディープコピーを行うことができる。

シャローコピーのサンプルを示す。

var obj1 = {
  foo: {
    bar: "old"
  }
};
var obj2 = jQuery.extend({}, obj1);

document.writeln('<p>obj2.foo.bar = ' + obj2.foo.bar + '</p>');
obj1.foo.bar = "new";
document.writeln('<p>obj2.foo.bar = ' + obj2.foo.bar + '</p>');

シャローコピーの実行結果を示す。

ディープコピーのサンプルを示す。

var obj1 = {
  foo: {
    bar: "old"
  }
};
var obj2 = jQuery.extend(true, {}, obj1);

document.writeln('<p>obj2.foo.bar = ' + obj2.foo.bar + '</p>');
obj1.foo.bar = "new";
document.writeln('<p>obj2.foo.bar = ' + obj2.foo.bar + '</p>');

ディープコピーの実行結果を示す。