jQueryの$.extend()メソッドの使い方

2015/11/14 jQuery

jQueryの$.extend()メソッドは第一引数に、その後指定したオブジェクトの引数をマージするメソッドです。

以下の場合、obj1にobj2をマージしています。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var ret =$.extend(obj1,obj2);
  alert(JSON.stringify(ret));
});

$(function(){

var obj1 = {name:'Bob'};

var obj2 = {age:20};

var ret =$.extend(obj1,obj2);

alert(JSON.stringify(ret));

});

DEMO

マージするので、あとから指定したオブジェクトに同じキーがある場合、値が上書きされます。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var obj3 = {name:'Tom'};
  var ret =$.extend(obj1,obj2,obj3);
  alert(JSON.stringify(ret));
});

$(function(){

var obj1 = {name:'Bob'};

var obj2 = {age:20};

var obj3 = {name:'Tom'};

var ret =$.extend(obj1,obj2,obj3);

alert(JSON.stringify(ret));

});

DEMO

上記のようにあとから指定して上書きされると、obj1の内容がobj2,obj3によって上書きされてしまいます。以下、obj1の内容が変わってしまっているのが確認できると思います。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var obj3 = {name:'Tom'};
  var ret =$.extend(obj1,obj2,obj3);
  alert(JSON.stringify(ret));
  alert(JSON.stringify(obj1));
});

$(function(){

var obj1 = {name:'Bob'};

var obj2 = {age:20};

var obj3 = {name:'Tom'};

var ret =$.extend(obj1,obj2,obj3);

alert(JSON.stringify(ret));

alert(JSON.stringify(obj1));

});

DEMO

これは$.extend()メソッドは第一引数のオブジェクトに対してマージする為です。

obj1の内容が変わるのが困る場合、以下のように空のオブジェクトを指定します。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var obj3 = {name:'Tom'};
  var ret =$.extend({},obj1,obj2,obj3);
  alert(JSON.stringify(ret));
  alert(JSON.stringify(obj1));
});