how to implement javascript inheritance

Question

I'm looking into javascript inheritance for the first time, and I don't seem to be able to get it to work, or perhaps I'm not understanding it correctly. So I have some code here, let's have a look at it:

<script language="javascript" type="text/javascript">               
            //object and prototype
            function cat(name){//object constructor
                this.name = name;//property
                this.talk = function(){//method
                    console.log(this.name + " say meeow");
                }
            }           
            cat1 = new cat("Cat 1 Felix")
            cat1.talk();            
            cat2 = new cat("cat 2 Joy")
            cat2.talk()
            //inheritance
            function isleManCat(name){
                cat.call(this,name)
                this.feature = "no tail"
                this.detail = function(){
                    console.log(this.name + " has " + this.feature);
                }
            }
            isleManCat.prototype = new cat();
            cat3 = new isleManCat("isle of Man cat")
            cat3.talk();
            cat3.detail();          
        </script>

So I have 2 cats objects here and cat1 and cat2 prints the expected results:

Cat 1 Felix say meeow
cat 2 Joy say meeow

. Then cat3 is a isleOfMan() cat which should inherit from cat(), and I would have thought that it would inherit the name property from cat() but it prints undefined:

undefined say meeow
undefined has no tail

Can somebody kindly let me know why it doesn't work and what i'm doing wrong please as I don't seem to understand that? Thanks

Answer 1

Your third kitten deriving cat won't produce your expected result because the cat constructor won't be called by isleManCat 's constructor auto-magically! And your third kitten has no name at all!

        // You need to pass the name of the whole cat to this constructor
        // to later give it as argument to base constructor (i.e. cat())
        function isleManCat(name){
            // This is calling cat constructor function setting the "this"
            // keyword to the "this" of isleManCat
            cat.call(this, name);

            this.feature = "no tail"
            this.detail = function(){
                console.log(this.name + " has " + this.feature);
            }
        }

In ECMA-Script 5.x you can also use Function.prototype.apply and arguments reserved keyword to pass isleOfMan constructor's arguments as an array to cat :

        function isleManCat(){
            cat.apply(this, arguments);

            this.feature = "no tail"
            this.detail = function(){
                console.log(this.name + " has " + this.feature);
            }
        }

And, in ECMA-Script 2015 and above, you can use rest parameters :

        function isleManCat(...args){
            // This is calling cat constructor function setting the "this"
            // keyword to the "this" of isleManCat
            cat.apply(this, args);

            this.feature = "no tail"
            this.detail = function(){
                console.log(this.name + " has " + this.feature);
            }
        }