如何從子類訪問超類實例變量？

Question

大家！

假設我在JavaScript中有此類：

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

Animal.prototype.someMethod =
    function ()
    {
    }

和這個子類：

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
    }

從Cat類中的重寫方法訪問超類“名稱”實例變量的語法是什么？

謝謝。

馬可斯

更新 ：好吧，如果您想查看真實的代碼，就在這里。 問題出在abc變量（只是我正在使用的測試變量）上。

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

您的實際代碼揭示了問題所在。 問題在於您如何稱呼materialMudado 。 它被作為事件的回調調用。 回調中的關鍵字this將指向事件的目標（不具有abc屬性），而不是函數“所屬”的對象。

這是一個簡單的演示：

function Test() {};

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

var t = new Test();

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

輸出（單擊頁面后）：

[object HTMLDocument]

比較一下：

function Test() {};

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

var t = new Test();

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

輸出：

[object Object]

在第二個示例中，我們關閉變量t ，並保留對其的引用。

將其應用到您的示例中將產生如下內容：

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應該起作用。 我看不到您在Cat函數中覆蓋了name屬性，因此您應該只能執行this.name ，而命題鏈將完成查找該屬性的第一個實例Animal.name 。

Answer 3

只需使用this關鍵字：

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

將此代碼添加到底部，我剛剛向您的someMethod方法添加了警報...

在您的示例中，Cat繼承了Animal的所有內容，因此可以訪問name變量

Answer 4

沒有實例變量的替代。 實例變量只是this對象的屬性。 您可以閱讀：

var x = this.name;

或分配給它：

this.name = "foo";

無論您具有Animal對象的實例還是Cat對象的實例， this.name都將訪問​​該名稱。

如果要在Cat構造函數中分配給name屬性，則可以使用

this.name = "Cat";

一旦有了對象的工作實例，屬性就是屬性，就沒有區別是由超類還是子類創建的。 它們當時只是對象的屬性，您可以使用this.propertyName語法以相同的方式訪問所有這些this.propertyName 。