How to Use Inheritance in JavaScript with Constructor Methods Returning Object Literals with Private Properties?

Question

var Animal = function(config) {
    config = config || {};
    var name = config.name,
        numLegs = config.numLegs,
        weight = config.weight,
        speed = config.speed,
        sound = config.sound
    return {
        getName: function () {
            return name;
        },
        getNumLegs: function () {
            return numLegs;
        },
        getWeight: function () {
            return weight;
        },
        getSpeed: function () {
            return speed;
        },
        getSound: function () {
            return sound;
        },
        run: function(distance, unit) {
            unit = unit || 'miles';
            return 'The ' + name + ' ran ' + distance + ' ' + unit;
        },
        speak: function() {
            return 'The ' + name + ' says "' + sound + '"';
        }
    }
};

function DragonFly(config) {
    var me = {},
        numWings = config.numWings;
    me.prototype = new Animal(config);
    me.getNumWings = function() {
        return numWings;
    };
    me.fly = function(distance, unit) {
        unit = unit || 'miles';
        return 'The ' + me.name + ' flew ' + distance + ' ' + unit;
    }
    return me;
}

var dragonFly = new DragonFly({
    numWings: 2,
    name: 'DragonFly',
    numLegs: 6
});

Okay, coming from a PHP background, I don't understand inheritance in JavaScript one bit and I'd like some help.

Basically, here's what I'd like to be able to do with an instance of the dragonFly object:

dragonFly.getName(); // 'DragonFly'
dragonFly.fly(1, 'mile'); // 'The dragonfly flew 1 mile';
dragonFly.run(1, 'yard'); // 'The dragonfly ran 1 yard';

I'd also like to know how to override methods and call the parent of those overridden methods. What is wrong with my approach? All the examples above return undefined or throw an error. The main reason I went with the object-literal style is so I could make properties private.

you got a typo in your dragonfly.getName()

Joseph
– Joseph

2012-03-20 02:25:53 +00:00
Commented Mar 20, 2012 at 2:25 — Joseph
– Joseph, Commented Mar 20, 2012 at 2:25

mpm · Accepted Answer · 2012-03-20 02:38:42Z

2

the "fastest" way :

var Animal = function(config) {
config = config || {};
var name = config.name,
    numLegs = config.numLegs,
    weight = config.weight,
    speed = config.speed,
    sound = config.sound
return {
    getName: function () {
        return name;
    },
    getNumLegs: function () {
        return numLegs;
    },
    getWeight: function () {
        return weight;
    },
    getSpeed: function () {
        return speed;
    },
    getSound: function () {
        return sound;
    },
    run: function(distance, unit) {
        unit = unit || 'miles';
        return 'The ' + name + ' ran ' + distance + ' ' + unit;
    },
    speak: function() {
        return 'The ' + name + ' says "' + sound + '"';
    }
   }
};

function DragonFly(config) {
var me = new Animal(config);
var numWings = config.numWings;
me.getNumWings = function() {
    return numWings;
};
me.fly = function(distance, unit) {
    unit = unit || 'miles';
    return 'The ' + me.name + ' flew ' + distance + ' ' + unit;
}
return me;
}

var dragonFly = new DragonFly({
numWings: 2,
name: 'DragonFly',
numLegs: 6
});

You are mixing 2 kind of "inheritance" in your script , the "classical" inheritance and the prototypal inheritance , you cant do that unless you want to be in serious trouble. both work , both have their pros and cons. Stick to the "classical" inheritance , or object augmentation since you began with it.

An object literal doesnt have a prototype , functions have prototypes. That's why in my opinion js isnt "really" object oriented , but it can mimic object oriented langages

A good exercice now would be to try using functions and prototypes , though i'm not sure you could create private fields with that.

Edit : the me.name should be me.getName() since name is "private". i think.

edited Mar 20, 2012 at 2:38

answered Mar 20, 2012 at 2:32

mpm

20.2k7 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Levi Hackwith Over a year ago

thanks for the clarification. On the same note, how would I go about overriding methods / calling parent methods that have been overridden?

mpm Over a year ago

hmm, i dont use classical inheritance , i'm not sure you can , you'll have to drop privates and use prototypal inheritance so you can go backward on the prototype chain. have a look at that website : crockford.com/javascript/inheritance.html , edit : have a look at Object.create in ES5.

Collectives™ on Stack Overflow

How to Use Inheritance in JavaScript with Constructor Methods Returning Object Literals with Private Properties?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related