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

You never specified a name for your isleManCat to begin with. — RainingChain
– RainingChain, Commented May 28, 2016 at 21:46
isleManCat() needs to call the constructor it inherited from. There are thousands of tutorials on inheritance in Javascript and hundreds of answers here on the same topic. Please read and then ask a much more specific question when you get stuck. We aren't a generic tutorial service when you haven't done any of your own research. For example, start here. — jfriend00
– jfriend00, Commented May 28, 2016 at 21:50
Are you sure your output still matches your (modified - and please don't do this) code? — Amit
– Amit, Commented May 28, 2016 at 22:43

Matías Fidemraizer · Accepted Answer · 2016-05-28 21:56:33Z

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

Collectives™ on Stack Overflow

how to implement javascript inheritance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related