Javascript（jQuery）で「基本クラス」関数を呼び出す方法は？

Question

JavascriptでAnimalとZebraという2つの機能クラスを作成したいと思います。クライアントスクリプトは、ゼブラをインスタンス化することです、とシマウマは、動物から関数を参照して呼び出すことができるはずです。

ゼブラ：私は動物にベースを作るためにjQuery $.extend()を使用します。ここで、動物

はこのように、私は、次のことを試してみましたゼブラのクラス：しかし、私だけ見

I am a zebra
But I am also an animal

：

Animal = function() { 
    function hi_animal() { 
     console.log('But I am also an animal'); 
    } 

    return { 
     hi_animal: hi_animal 
    } 
} 

Zebra = function() { 
    $.extend(this, Animal); 

    function hi_zebra() { 
     console.log('I am a zebra!'); 

     hi_animal(); 
    } 

    return { 
     hi_zebra: hi_zebra 
    } 
} 

$(document).ready(function() { 
    var my_zebra = new Zebra(); 
    my_zebra.hi_zebra(); 
}); 

ブラウザログは、次の2行が表示されるはずです

I am a zebra!
Uncaught ReferenceError: hi_animal is not defined

ここにはfiddleがあります。

私には何が欠けていますか？

Answer 1

JSでのクラス継承の構文が正しくありません。 $.extendは、オブジェクトプロパティを転置することを意図しています。関数/クラスに与える影響は、まったく偶然です。

基本クラスを定義し、派生インスタンスのプロトタイプを作成する必要があります。これを試してみてください：

function Animal() { 
 
    // put constructor logic here... 
 
} 
 
Animal.prototype.hi_animal = function() { 
 
    console.log('But I am also an animal'); 
 
} 
 

 
Zebra.prototype = new Animal(); 
 
Zebra.prototype.constructor = Zebra; // otherwise constructor will be Animal() 
 
function Zebra() { 
 
    // put constructor logic here... 
 
} 
 
Zebra.prototype.hi_zebra = function() { 
 
    console.log('I am a zebra!'); 
 
    this.hi_animal(); 
 
} 
 

 
$(document).ready(function() { 
 
    var my_zebra = new Zebra(); 
 
    my_zebra.hi_zebra(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

@Rory McCrossanの答えは完全に正しいです。 しかし、Javascriptについて私が大好きなのは、プロトタイプシステムがどのように動作するかです。以下はRoryのわずかに変更されたバージョンですが、プロトタイプチェーンを使用しないと、プロトタイプチェーンをより平坦に保つため、パフォーマンス上の利点があります。 C＃/ Delphiなどの世界では、VMTを操作できるようです。

function Animal() { 
 
    // put constructor logic here... 
 
} 
 
Animal.prototype.hi_animal = function() { 
 
    console.log('But I am also an animal'); 
 
} 
 

 
function Zebra() { 
 
    // put constructor logic here... 
 
} 
 
Zebra.prototype.hi_zebra = function() { 
 
    console.log('I am a zebra!'); 
 
    this.hi_animal(); 
 
} 
 
Zebra.prototype.hi_animal = Animal.prototype.hi_animal; 
 

 
$(document).ready(function() { 
 
    var my_zebra = new Zebra(); 
 
    my_zebra.hi_zebra(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>