[JavaScript] [jQuery] jQuery.extend()でオブジェクトをマージ(ミックスイン)する

オブジェクトのマージ(ミックスイン)

$.extend()に2つ以上の引数を渡すと、2つ目以降の引数で渡されたオブジェクトを、最初の引数で渡されたオブジェクトにマージすることができます。

以下のコードでは、hogeオブジェクト に fooオブジェクトをマージしています。

(以下すべてのコードでは、jquery-1.6.2.js を使用しました。)

var hoge = {name: "hoge", width: "100px" };
var foo  = {width: "200px", height: "100px"};

hoge = $.extend(hoge, foo);

console.log(hoge.name);   // hoge
console.log(hoge.width);  // 200px  <- foo.widthの値で上書きされた
console.log(hoge.height); // 100px　<- foo.heightが追加された

$.extend()に引数が1つしか渡されない場合は、引数のオブジェクトは、$(=jQuery)オブジェクトにマージされます。

var hoge = {name: "hoge", width: "100px" };
$.extend(hoge);
console.log($.width); //100px

ネストしたオブジェクトをマージしたい場合は、最初の引数にtrue を渡せばokです。

var hoge = { pos: { top: "0", left: "0" } };
var foo  = { pos: { top: "100" } };

//------------------------------------------------------------------------
//true を指定しない場合
hoge = $.extend(hoge, foo);

console.log(hoge.pos.top);  // 100
console.log(hoge.pos.left); //undefined <- hoge.posはfoo.posに置き換わった

//------------------------------------------------------------------------
//true を指定した場合
hoge = $.extend(hoge, foo);

console.log(hoge.position.top);  // 100
console.log(hoge.position.left); // 0  <- hoge.position はfoo.posとマージされた

何が便利なのか？

例えば、ユーザーが上書きできるデフォルト値を持つ関数を作りたい場合、以下のように、$.extend()でoptionsオブジェクトをparamsとマージすれば、ユーザーが指定したオプション値をデフォルトのオプション値をミックスしたオブジェクトが出来上がります。

以降の処理では、optinsオブジェクトからすべてのオプションにアクセスできます。

function foo(params){

var options = {
top : 20,
left: 100
}

options = $.extend(options, params);
//---略---
}

まとめ

柔軟なオプション指定が可能な関数、jQueryプラグインを開発したいときは、$.extend()でデフォルト値とユーザー指定値をマージする！