JavaScriptのわかりにくさと言うか、面倒くさい実装の一つ「拡張」 そもそも「クラス」という概念ではなく「プラグイン」と定義している。

という事で、プラグイン拡張をjQuery API jQuery.extend()でお勉強

■拡張の定義

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

■最初のオブジェクト(objects1)を変更して、object1とobject2をマージ

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};

$.extend(object1, object2);

実行結果

object1 === {apple: 0, banana: {price: 200}, cherry: 97, durian: 100}

object1のbananaオブジェクトが、object2のbananaオブジェクトで上書きされている

■最初のオブジェクト(objects1)を変更して、objects1、objects2を再帰的にマージ

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};

$.extend(true, object1, object2);

実行結果

object1 === {apple: 0, banana: {weight: 52, price: 200}, cherry: 97, durian: 100}

bananaオブジェクトの中身まで検証し、object2の値が優先で上書きされる

■settingsを変更して、defaultsとoptionsをマージ

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

実行結果

settings == { validate: true, limit: 5, name: "bar" }

■defaultsを変更せずに、defaultsとoptionsをマージ

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

実行結果

settings == { validate: true, limit: 5, name: "bar" } empty == { validate: true, limit: 5, name: "bar" }

マージされたオブジェクトはemptyに格納されている