検索
連載

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

要素セットに対して要素の追加/置換/削除などを行うためのメソッドと便利なユーティリティ機能をまとめた、すぐに役立つ18本を一挙公開。

Share
Tweet
LINE
Hatena



「連載: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.

ページトップに戻る