第4回 要素の操作&ユーティリティ編連載:jQuery逆引きリファレンス(13/19 ページ)

» 2010年02月12日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 「$.extend」メソッドは、オブジェクトtargetに対して、オブジェクトobj、……のメンバをコピーします(オブジェクトobjは複数指定できます)。この$.extendメソッドは、継承をシンプルに実現するための手段であると考えればよいでしょう。

 以下は、Animalオブジェクトを継承したHamsterオブジェクトを定義する例です。

<script type="text/javascript">

// Animalオブジェクトと、そのメンバとしてwalkメソッドを定義
var Animal = function() { };

Animal.prototype = {
  walk: function() {
    window.alert('トコトコ');
  }
};

// Animalオブジェクトと、そのメンバとしてgnawメソッドを定義
var Hamster = function() { };

Hamster.prototype = {
  gnaw: function() {
    window.alert('ガシガシ');
  }
};

// Hamsterオブジェクトに、Animalオブジェクトのメンバをコピー
$.extend(Hamster.prototype, Animal.prototype);

var ham = new Hamster();
ham.walk(); // 表示結果:トコトコ
ham.gnaw(); // 表示結果:ガシガシ

</script>

リスト072 Animalオブジェクトを継承したHamsterオブジェクトを定義(Extend.htm)

 インスタンス・メソッドを引き継ぐには、継承元のprototypeプロパティを、継承先のprototypeプロパティにコピーします。

 実行すると、Hamsterオブジェクトのプロトタイプで定義されたgnawメソッドはもちろん、Animalオブジェクトのプロトタイプで定義されたwalkメソッドも、Hamsterオブジェクトから呼び出せることが確認できます。

 $.extendメソッドは、インスタンス・メソッドextendと似ていますが、extendメソッドがjQueryオブジェクトの機能を拡張するのに対して、$.extendメソッドは一般的なオブジェクトの拡張を行います。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。