如何用Javascript（jQuery）調用「基類」函數？

Question

我想在Javascript中創建兩個功能類：動物和斑馬。客戶端腳本實例斑馬，然後斑馬應該能夠看到從動物調用函數：

斑馬：動物

因此，我嘗試以下，在這裏我使用jQuery $.extend()，使動物基地類斑馬：

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(); 
}); 

瀏覽器日誌應顯示兩行：

I am a zebra
But I am also an animal

不過，我只看到：

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>