Javascript Inheritance using constructor functions

Question

I'm trying to make one constructor function parent of another constructor function.

function Fruit() {
    this.isEatable = function() {
        return eatable;
    };
}
function Apple(eatable , sweet) {
    this.isSweet = function() {
        return sweet;
    };
    var instance = {};
    Fruit.apply(instance);
    _.extend(this, instance);
}

var a = new Apple(true, false);

console.log(a.isEatable()); // Uncaught ReferenceError: eatable is not defined

But as you can see I get an error , what is the reason ? What is the better way to make one function inherit from another function ?

I also tried the following , and I still get the same error :

function Fruit() {
    this.isEatable = function() {
        return eatable;
    };
}
function Apple(eatable , sweet) {
    this.isSweet = function() {
        return sweet;
    };
}

_.extend(Apple.prototype , Fruit.prototype);// I use lodash library
var a = new Apple(true, false);

console.log(a.isEatable()); // Uncaught ReferenceError: eatable is not defined

JavaScript has only lexical scope for variables. [Use properties](http://stackoverflow.com/q/13418669/1048572?javascript-do-i-need-to-put-this-var-for-every-variable-in-an-object)! — Bergi, Oct 28 '15 at 08:36
@Bergi : I don't expect it to work. I expect `instance` to have it after calling `apply` — Arian, Oct 28 '15 at 09:18
Yes, `instance` *does* have the `isEatable` method after you called `apply`, but the method does not have an `eatable` variable in its scope - which is where it is declared, not where it is used. For that, you have to use `this.`. — Bergi, Oct 28 '15 at 09:22

JosephGarrone · Accepted Answer · 2015-10-28T09:35:27.823

2

Try the following

function Fruit(eatable) {
    this.eatable = eatable;
    this.isEatable = function() {
        return this.eatable;
    };
}

function Apple(eatable , sweet) {
    // Call the constructor of the inherited 'object'
    Fruit.call(this, eatable);

    this.sweet = sweet;

    this.isSweet = function() {
        return this.sweet;
    };
}

// Inherit the Fruit.prototype methods for Apple
Apple.prototype = Object.create(Fruit.prototype);

var a = new Apple(true, false);

console.log(a.isEatable());

This is based off the (Very useful) code given as an example in the MDN Object.create documentation. Here's a JSFiddle.

edited Oct 28 '15 at 09:35

answered Oct 28 '15 at 08:27

JosephGarrone

4,081
3
38
61

If you remove the line at which you do 'Object.create' it still works. right ? – Arian Oct 28 '15 at 08:46
2

@ArianHosseinzadeh: But then `a instanceof Fruit` no longer works. Also, if you had put the methods on the prototype, like `Fruit.prototype.isEatable() { return this.eatable; };` (which in fact you should consider to do), it would no longer work without `Object.create` inheritance. – Bergi Oct 28 '15 at 09:23

score -1 · Answer 2 · answered Oct 28 '15 at 09:03

-1

just other way

function Fruit() {
    this.isEatable = function() {
        return this.eatable;
    };
}
function Apple(eatable , sweet) {
    this.sweet=sweet;
    this.eatable=eatable;
    this.isSweet = function() {
        return this.sweet;
    };
    this.prototype= Fruit.apply(this);
}

var a = new Apple(true, false);

console.log(a.isEatable());

It's somewhat same thing as @Asryael i guess

short explanation: prototype binds new Fruit object with this of Apple , so you don't need to pass parameters again in root object, this takes care of it .

answered Oct 28 '15 at 09:03

Aishwat Singh

4,331
2
26
48

I don't want to change the prototype of this, because later if someone decides to extend the definition of `Apple` it won't affect the instances. right ? – Arian Oct 28 '15 at 09:18
can u give an example of "extend the definition" ? i mean if u add new params to apple , it won't affect. – Aishwat Singh Oct 28 '15 at 09:22
`this.prototype= Fruit.apply(this);` is really really not going to work. – Bergi Oct 28 '15 at 09:24
@Bergi care to explain ? nd ya thanks for the downvote – Aishwat Singh Oct 28 '15 at 09:27
Apple's prototype is a new Fruit object, Fruit object binded to that Apple Object. Whats wrong in this ? Is it bcoz Fruit cannot exist without Apple , as it doesn't have a eatable param – Aishwat Singh Oct 28 '15 at 09:37

Javascript Inheritance using constructor functions

2 Answers2