jQueryの$.extendに注意：$.extend({},target,option)と$.extend(target,option)の違い

jQueryの$.extendはとても便利な機能です。

jQueryのプラグインを作成する場合は以下の二つを利用します。

$.extend(object) //jQueryそのものを拡張する
$.fn.extend(object) //jQueryエレメントに新しいメソッドを追加する。
//（典型的なjQueryプラグインの作成方法）

今回検討するのは第三の使い方です。

$.extend(target,option,...);

これは第一のパラメータのオブジェクトをどんどん拡張する意味です。

実際のプログラミングではこんな使い方が両方あります。

$.extend(target, option);
$.extend({}, target, option);

違いは何でしょうか？

$.extend(target, option);

これはtargetそのものを拡張する意味です。

実行後targetオブジェクトは変更(拡張)されます。

実例として、例えばプロジェクトにトップレベルの空のConstansクラスがあります。

その下で各モジュール要のconstantsが定義されていて、

それをトップのConstantsに拡張します。

$.extend(constants,subConstants1,subConstants2...);

落とし穴：

var defaults = {};
var option = {};
var opts = $.extend(defaults,option);

上記ではdefaultsが変更され、わざわざ変数optsに代入する意味もなくなります。

$.extend({}, target, option);

これは空のオブジェクトを拡張する意味です。

実行後、targetもoptionもかわらりません。

最も多く使われている実例は、jQueryのプラグインの開発です。

あるデフォルトのoptionを定義し、

ユーザが自分のニーズにあったoptionがあればそれを適用する感じです。

ここで大事なのは定義したデフォルトのoptionはかわりたくないのです。

なので、最初に空のオブジェクトを拡張しそれを何かの変数に

リファレンスをアサインします。

var defaults = {};
var option = {};
var opts = $.extend({},defaults,option);

これで変数optsは求めているデフォルトoptionとユーザが定義したoptionをマージ、拡張したものとなります。