js STUDIO

$.extend()

複数のオブジェクトをマージすることで、オブジェクトを拡張します。

$.extend( target [, object1] [, objectN] ) 1.0追加

戻り値:Object

引数 説明
target プロパティをマージする基底となるオブジェクトを指定します。
[object1] マージするためのプロパティを持つオブジェクトを指定します。
[objectN] マージするためのプロパティを持つオブジェクトを指定します。

$.extend( [deep], target, object1 [, objectN] ) 1.1.4追加

戻り値:Object

引数 説明
[deep] trueを指定すると、再帰的に階層の深いプロパティもマージします。
target プロパティをマージする基底となるオブジェクトを指定します。
[object1] マージするためのプロパティを持つオブジェクトを指定します。
[objectN] マージするためのプロパティを持つオブジェクトを指定します。

補足事項

引数が１つの場合、targetオブジェクトが省略されたと見なされ、jQuery自体がtargetとなります。 jQueryプラグイン作成時にjQuery名前空間を拡張する際に使用されます。

targetに指定したオブジェクトが変更され、また、そのオブジェクトが戻り値となることに注意してください。 もし、元のオブジェクトを変更したくなければ空のオブジェクトをtargetに指定します。 

var object = $.extend({}, object1, object2);

$.extend()は通常、再帰的なマージを行いません。 もし、targetに指定したオブジェクトのプロパティがそれ自身もオブジェクトであったり、配列であった場合、 第2引数以降のオブジェクトにキーが一致するプロパティがあれば、完全に上書きされてしまいます。 第1引数のdeepに対して、trueを指定すればこれらのプロパティに対してもマージすることが出来ます。

未定義のプロパティはコピーされませんが、prototypeから継承されたプロパティはコピーされます。 プロパティは独自実装のオブジェクトやDateやRegExpなどの組み込みオブジェクトによって新しく構築されます。

deepによる拡張はオブジェクトと配列には有効ですが、String,Boolean,Number等のプリミティブ型に対しては機能しません。

デモ

2つのオブジェクトをマージしています。その結果、1つ目のオブジェクトが変更されています。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};

/* マージ処理(bananaのweightが無くなります) */
$.extend(object1, object2);

var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
  var arr = [];
  $.each(obj, function(key, val) {
    var next = key + ": ";
    next += $.isPlainObject(val) ? printObj(val) : val;
    arr.push( next );
  });
  return "{ " +  arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>

deepにtrueを指定して、再帰的なマージを行なっています。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};

/* 再帰的なマージ処理(bananaのweightが残ります) */
$.extend(true, object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
  var arr = [];
  $.each(obj, function(key, val) {
    var next = key + ": ";
    next += $.isPlainObject(val) ? printObj(val) : val;
    arr.push( next );
  });
  return "{ " +  arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>

元のオブジェクトを変更しないマージ処理を行います。これは、jQueryプラグイン開発時の一般的なテクニックです。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

/* 元のオブジェクトを変更しないマージ処理 */
var settings = $.extend({}, defaults, options);

var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
  var arr = [];
  $.each(obj, function(key, val) {
    var next = key + ": ";
    next += $.isPlainObject(val) ? printObj(val) : val;
    arr.push( next );
  });
  return "{ " +  arr.join(", ") + " }";
};

$("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );
$("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );
$("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" );
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM