jQuery.extend() メソッドの使い方まとめ

matsuo

11年 ago

知っている人には当たり前のことかもしれませんが、使い方をまとめておきます。

jQuery.extend() は、基本的には複数のオブジェクトをマージして返してくれるメソッドです。
(プラグインのソースで、デフォルトの設定値を上書きする時などによく見かけますね）

jQuery.extend(target[, object1][, objectN])

こんな感じで使います。
オブジェクト a の内容と b の内容をマージしたいとき、

var a = {
    id: 1,
  name: 'TAM'
};

var b = {
    name: 'TAM-new',
  hobby: 'football' 
};

$.extend(a, b);

console.log(a);
// 結果:
//    {
//     id: 1,
//        name: "TAM-new",
//        hobby: "football"
//   }

$.extend(a, b) とすることで、a に b をマージします。
同じプロパティがあれば b の値で上書きされますし、新しいプロパティがあれば追加してくれます。

また、extend() にはいくつでもオブジェクトを指定可能です。

var a = {
   id: 1,
  name: 'TAM'
};

var b = {
    name: 'TAM-new',
  hobby: 'football' 
};

var c = {
 name: 'TAM-new-new',
  job: 'designer'
};

$.extend(a, b, c);

console.log(a);
// 結果:
//    {
//     id: 1,
//        name: "TAM-new-new",
//        hobby: "football",
//      job: "designer"
// }

$.extend(a, b, c) とすることで、a に b の値を上書き、さらに c の値を上書きします。
同じプロパティがあれば、あとに指定されたものが優先される仕様です。この場合は c ですね。

なお、extend() では第1引数の中身が書き換わります（前述の例では a）。
もし、a の中身が書き換わってしまうのを避けたい場合は、

var a = {
    id: 1,
  name: 'TAM'
};

var b = {
    name: 'TAM-new',
  hobby: 'football' 
};

var newobject = $.extend({}, a, b);

第1引数に空のオブジェクト {} を指定して、復帰値を新しいオブジェクトに入れてやればOKです。
この方法なら、空のオブジェクトに a と b をマージするという処理になりますので、a の値は書き換えられません。

あと一点。
では、この場合は？

var a = {
    style: {
        top: 100,
       left: 200,
      width: 300
  },
  duration: 1000
};

var b = {
   style: {
        height: 400
 }
};

$.extend(a, b);

console.log(a);
// 結果:
//   {
//     style: {
//          height: 400
//       },
//        duration: 1000
//    }

a に b をマージする際にプロパティ style の値が上書きされるのですが、中身は 'height' だけになってしまいます。まるごと置き換えられてしまうのですね。

下の階層の値も再帰的にマージ（ディープコピー）してほしい場合は、extend() の第1引数に true を指定します。

var a = {
   style: {
        top: 100,
       left: 200,
      width: 300
  },
  duration: 1000
};

var b = {
   style: {
        height: 400
 }
};

$.extend(true, a, b);

console.log(a);
// 結果:
// {
//     style: {
//          top: 100,
//         left: 200,
//            width: 300
//            height: 400
//       },
//        duration: 1000
//    }

これで style の中の値もマージされました！

【まとめ】

jQuery.extend() で複数のオブジェクトをマージできる
値は 2つだけでなく、いくつでも書ける
値の中身を書き換えられたくない場合は第1引数に空のオブジェクト {} を指定
下の階層までマージしたい場合は第1引数に true を指定

jQuery オフィシャルのドキュメントもご参考に……
http://api.jquery.com/jQuery.extend/