如何从子类访问超类实例变量？

Question

everybody!

Suppose that I have this class in JavaScript:

function Animal()
{
    this.name = "name";
}

Animal.prototype.someMethod =
    function ()
    {
    }

and this subclass:

function Cat()
{
    Animal.call(this);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

Cat.prototype.someMethod =
    function ()
    {
        // I want to access the superclass "name" instance variable here
    }

What's the syntax to access the superclass "name" instance variable from the overriden method in the Cat class?

Thank you.

Marcos

UPDATED : Well, if you want to see the real code, here it is. The problem is with the abc variable (just a test variable that I was using).

var pesquisaAcervo;

$(
    function ()
    {
        carregadoBase();

        if ($("#form\\:tipoPesquisa").val() == "SIMPLES")
        {
            pesquisaAcervo = new PesquisaAcervoSimples();
        }
        else
        {
            pesquisaAcervo = new PesquisaAcervoAvancada();
        }
        pesquisaAcervo.paginaCarregada();
    }
);

// --- PesquisaAcervo ----------------------------------------------------------

function PesquisaAcervo()
{
    $("*:visible[id^='form:materiaisPesquisa']").
        change(this.materialMudado).keyup(this.materialMudado);

    this.abc = 10;
}

PesquisaAcervo.prototype.paginaCarregada =
    function ()
    {
        $("#cabecalhoPesquisa a").click(this.exibirDicasPesquisa);
        $("#cabecalhoPesquisa select").
            change(function () {$("#form").submit();}).
            keyup(function () {$(this).change();});

        $("*:visible[class*='foco']").focus().select();
    };

PesquisaAcervo.prototype.materialMudado =
    function ()
    {
    };

PesquisaAcervo.prototype.exibirDicasPesquisa =  
    function ()
    {
    };

// --- PesquisaAcervoSimples ---------------------------------------------------

function PesquisaAcervoSimples()
{
    PesquisaAcervo.call(this);

    $("#form\\:campos").change(
        function ()
        {
            $("#textoCampo").text($("#form\\:campos :selected").text() + ":");
        }
     ).keyup(function () {$(this).change();}).change();

    $("#pesquisaSimples a").click(
        function ()
        {
            pesquisaAcervo = new PesquisaAcervoAvancada();

            $("#pesquisaSimples").parent().hide();

            $("#pesquisaAvancada").parent().show();

            $("#form\\:tipoPesquisa").val("AVANCADO");
        }
   );
}

PesquisaAcervoSimples.prototype = new PesquisaAcervo();
PesquisaAcervoSimples.prototype.constructor = PesquisaAcervoSimples;

PesquisaAcervoSimples.prototype.materialMudado =
    function ()
    {
        alert(this.abc); // "undefined" here
    };

// --- PesquisaAcervoAvancada --------------------------------------------------

function PesquisaAcervoAvancada()
{
     PesquisaAcervo.call(this);
}

PesquisaAcervoAvancada.prototype = new PesquisaAcervo();
PesquisaAcervoAvancada.prototype.constructor = PesquisaAcervoAvancada;

Answer 1

Your actual code reveals the problem. The issue is with how you're calling materialMudado . It's being invoked as the callback for an event. The keyword this inside the callback will refer to the target of the event (which has no abc property), not to the object that the function "belongs" to.

Here's a simple demonstration:

function Test() {};

Test.prototype.callback = function() {
    alert(this);
}

var t = new Test();

$(document).click(t.callback);

Output (after clicking page):

[object HTMLDocument]

Compare to this:

function Test() {};

Test.prototype.callback = function() {
    alert(this);
}

var t = new Test();

$(document).click(function() {
    t.callback();
});

Output:

[object Object]

In this second example we close over the variable t , retaining a reference to it.

Applying this to your example produces something like this:

function PesquisaAcervo() {
    var that = this;
    var callback = function() {
        that.materialMudado();
    };
    $("*:visible[id^='form:materiaisPesquisa']").
        change(callback).keyup(callback);

    this.abc = 10;
}

Answer 2

this.name should work. I don't see you overriding the name property in your Cat function so you should be able to just do this.name and the protopical chain will do the work to find the first instance of this property which should be Animal.name .

Answer 3

Just use the this keyword:

function Animal()
{
    this.name = "name";
}

Animal.prototype.someMethod2 =
    function ()
    {
    }


function Cat()
{
    Animal.call(this);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

Cat.prototype.someMethod =
    function ()
    {
        alert(this.name);// I want to access the superclass "name" instance variable here
    }
var c = new Cat();
c.someMethod();

Add this code to the bottom, I've just added an alert to your someMethod method...

In your example, Cat derives everything from Animal, so it has access to the name variable

Answer 4

There is no such thing as an override for an instance variable. An instance variable is just a property on the this object. You can read it with:

var x = this.name;

or assign to it with:

this.name = "foo";

this.name will access the name whether you have an instance of an Animal object or an instance of a Cat object.

If you want to assign to the name property in the Cat constructor, you can just do so with

this.name = "Cat";

Once you have a working instance of an object, properties are just properties and there is no distinction for whether a property was created by a superclass or a subclass. They're just properties of the object at that point and you access all of them the same way with the this.propertyName syntax.