jQuery.extendでオブジェクトを拡張する

programming javascript jQuery

基本

オブジェクト設定のデフォルトを定義しておき、後から設定されるオプションを上書きする場合。

var defaultValue = { value1: "default1",value2: "default2"};
var option = { value1:"vallue1"};
var extended = jQuery.extend(defaultValue,option);

extended.value1はoptionの内容で上書きされる。extended.value2はdefaultValue.value2の内容になる。
分でjquery拡張を書く時なんかに使う。

クラスの継承

基本クラスにメンバーを追加する、あるいはメソッドをオーバーライドする。
間違ったやり方はこう。

var Parent = function(){ ... };
Parent.protorype = { ... };
var Child = function(){ ... };
Child.prototype = { ... };
jQuery.extend(Child,Parent);

多分意図とは逆にChildに定義したメンバーがParentで上書きされてしまう。
これもだめ。

var Parent = function(){ ... };
Parent.protorype = { ... };
var Child = function(){ ... };
Child.prototype = { ... };
var extended = jQuery.extend({},Parent.prototype,Child.prototype);

意図としては"var obj = new Child()"したいのであって、これだと"var obj = new extended()"じゃないと使えない。
もしかしたら "var Child.prototype = jQuery.extend({},Parent.prototype,Child.prototype);"ならいけるかも。でも冗長。

var Parent = function(){ ... };
Parent.protorype = { ... };
var Child = function(){ ... };
 = { ... };
jQuery.extend(Child.prototype,Parent.prototype,{ /* 拡張メンバー */ });

こう書けば、意図通りに動作する。Childで上書きしなかったメンバーもChild内でthis.hogeして使える。
ただし、この書き方をするとjsdocのコメントがうまく入らなくなるので、昨日の日記を参照。
あと、オーバーライドしたメンバーの親を使う場合どうするのか、は未だ試してない。

追記:
最後の例が間違っていたので修正。
要するに

  • まだ空であるChildのprototypeに
  • 既に定義しているParent.prototypeを上書きし
  • さらに追加メンバーを上書きする。

って事。