[jQuery/JS/OOP] Dziedziczenie - problem i pytanie Opcje

[starach]

Chcąc stworzyć sobie Log wywołań AJAXa postanowiłem rozszerzyć klasę Pane:

Kod

function Pane()
{
    this.id = 0;
    this.id_html = '';
    this.name = '';
    this.jquery = '';
    this.content = '';
    this.template = '';
    this.container = $('body');
    this.isMinimized = false;
    var ths = this;
    this.open = function()
    {
        this.register();
        this.setTemplate();
        this.container.append(this.template);
        this.jquery = $('div#'+this.id_html);
        this.registerEvents();
    }
    this.close = function()
    {
        this.jquery.remove();
        PaneManager.unregister(this.id);
    }
    this.minimize = function()
    {
        $('div.content', this.jquery).css('display', 'none');
        this.isMinimized = true;
    }
    this.maximize = function()
    {
        $('div.content', this.jquery).css('display', 'block');
        this.isMinimized = false;
    }
    this.register = function()
    {
        this.id = PaneManager.register(this);
    }
    this.registerEvents = function()
    {
        $('div.btn_c', this.jquery).click(function(){ ths.close() });
        $('div.btn_m', this.jquery).click(function(){ if(ths.isMinimized) { ths.maximize(); } else { ths.minimize(); } });
        this.jquery.bind('dragstart',function(event)
        {
            return $(event.target).is('.header');
    });
    this.jquery.bind('drag', function(event)
        {
            $(this).css({ top: event.offsetY,left: event.offsetX });
        });
    }
    this.setTemplate = function()
    {
        this.id_html = 'pane-' + this.id;
        this.template = '<div id="' + this.id_html + '" class="pane">\n\
                                         <div class="header">' + this.name + '\n\
                                             <div class="btn_m">-</div>\n\
                                             <div class="btn_c">x</div>\n\
                                         </div>\n\
                                         <div class="content">' + this.content + '</div>\n\
                                         </div>';
    }
}

Klasą PaneLog:

Kod

function PaneLog()
{
    this.content = '<ul></ul>';

    this.append = function($message)
    {
        $('ul', this.jquery).append('<li>'+$message+'</li>');
    }
    this.setName = function($name)
    {
        this.name = '[LOG] ' + $name;
    }
    this.close = function()
    {
        alert('test')
        this.jquery.remove();
        PaneManager.unregister(this.id);
    }
    this.test = function()
    {
        console.log(this);
        console.log(this.id_html);
    }
}
PaneLog.prototype = new Pane();

Problem pierwszy: Metoda close klasy PaneLog jest nadpisywana przez metodę klasę rodzica. Jak temu zaradzić?
Problem drugi: Przy wywołaniu metody close zgłaszany jest błąd "this.jquery.remove is not a function". Przy wywołaniu innych metod korzystających z tej zmiennej komunikat się nie pokazuje. Może to być jednak uwarunkowane tym że this.jquery jest potrzebne jedynie jako kontener w którym wyszukany ma zostać pewien element i jako że jest on pusty wyszukanie odbywa się na całym dokumencie. Jest to tylko moje przypuszczenie bo nie wiem jak mogę to sprawdzić.

[smentek]

1. W javascript nie ma czegos takiego jak klasa. To co w swoim programie nazywasz klasą, jest funkcją (która jest także obiektem). A co do zasłoniętej metody, proponuje przerobic kod na taką modłę:

[PHP] pobierz, plaintext 
<?php
var Pane = function(){ // <---Przy tym zapisie widac wyraznie, ze Pane to nie zadna klasa a obiekt :)
    this.costam = 'xxx';
    this.ooo = 'ababa';
    this.close = function(){
        alert('zamykam' + this.costam)
    }
    
    
};
 
var PaneLog = function(){
    //Po odkomentowniu zmienna o wartości yyy 'wyjdzie na wierzch' 
    //this.costam = 'yyy';
    this.close = function(){
        alert('closing' + this.costam)
 
    }
}
 
 
var myPane = new Pane();
myPane.close();
 
//wskaźnik this z obiektu PaneLog będzie od tego momentu wskazywac na obiekt Pane
PaneLog.prototype = new Pane();
 
var myPaneLog = new PaneLog();
myPaneLog.close();
?>
[PHP] pobierz, plaintext 

2. Co do drugiego błędu, zgaduje że w danym momencie pod zmienną this.jquery nie ma wartości która odnosiła by sie do obiektu
jQuery. Tak jak w przykładzie poniżej. W wiekszości przypadków używasz this.jquery do budowy selectora tak więc nigdy nie wygeneruje to błędów (co najwyżej elementy drzewa DOM nie zostaną znalezione).

[PHP] pobierz, plaintext 
<?php
$(document).ready(function(){
    var smiec = 'bzdury';          // <-- łancuch znaków
    var element = $('#usmiech2'); // <-- obiekt jQuery
    
    element.remove();
    smiec.remove();
});
?>
[PHP] pobierz, plaintext 

Fakt że this.jquery jest zmienną obiektu wydaje mi się złym rozwiązaniem. Obiekt powinien zawierać to co jest jego częścią składową this.jquery jest tu 'ciałem obcym'

Musisz myśleć bardziej globalnie.
Programuj swoje obiekty tak jak by cała warstwa wizualna wogóle nie istniała zajmuj się nią na samym końcu. Np metoda do usunięcia czegos:

[PHP] pobierz, plaintext 
<?php
... //jestsmy w obiekcie    
    this.id; //Parametr id identyfikuje nam obiekt. 
    this.close = function(){
        //Tutaj kod który usunie element + jakieś inne działania na innych obiektach z tym zwiazane
 
            ....
 
        //Wyrzucamy nasz element z drzewa DOM (przestaje byc widoczny)
        $('#' + this.id).remove();
 
... //i dalej nastepne metody obiektu
    }
?>
[PHP] pobierz, plaintext 

Parametr this.id to praktycznie wszystko co jest potrzebne aby odnaleźć interesujący nas węzeł drzewa DOM i zmienić wygląd strony. Mając go możemy użyc jQuery czy innej biblioteki. aby zmienić ten fragment strony, który przedstawia nasz obiekt .