Variable access from JavaScript inherited methods

Question

I am studying the accessibility to variables from methods inherited from a parent to a child object.

The inheritance is performed associating an instance of the parent to the prototype of the child's constructor:

Function.prototype.extend = function(child) {
    var prototype = new this;

    child.prototype = prototype;
    return child;
};

So I define a parent class:

var Parent = function() {
    var self = this;

    this.init = function() {
        self.name = 'Abram';
    };
    this.getName = function() {
        alert('self.name = ' + self.name);
    };
    this.init();
};

and a child class:

var Baby = Parent.extend(function(name) {
    var self = this;

    this.init = function() {
        self.name = name;
    };
    this.init();
});

// instantiate a child object:
var baby = new Baby('Jimmy');

// call the inherited method:
baby.getName(); // undefined!

The method getName is correctly inherited, but it has no access to the self.name member.
How come, if it is available in the scope of the child class instance?

Checking the body of the method with alert(baby.getName) I get:

function () {
    alert("self.name = " + self.name);
}

which is exactly what I expected.
But why it does not resolve the self variable locally?

Pointy · Accepted Answer · 2012-02-15 14:08:59Z

3

The variable "self" in the parent "getName()" function refers to the parent instance. The "init" function in the child sets the name on that object, not the prototype object.

Thus:

var baby = new Baby("Jimmy"); results in an object with a "name" property set to the string "Jimmy"
baby.getName(); calls the function on the prototype object, since there's no "getName" property on the "baby" object. Inside that function, a reference is made to the variable "self", which refers to that prototype object — not to the object "baby". There's no "name" property set on the prototype object.

See what happens if you change the .getName() function in the prototype to use this.name instead of self.name.

answered Feb 15, 2012 at 14:08

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

2 Comments

yodabar Over a year ago

Thanks @Pointy, I already tried changing the self.name into this.name and it works (at that level, which is not yet a closure), but locally named members is exactly the benefit I would like to avail myself of for an effective code reuse, for example to munge them in nested functions scope.

Pointy Over a year ago

Well the problem is that the binding of "self" in your "Parent" function will always be to the original object instance; it's "stuck" there because of the closure.

Collectives™ on Stack Overflow

Variable access from JavaScript inherited methods

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