OO Metoda macierzysta wywołania JavaScriptu

Question

Staram się opanować OO JavaScript i stworzyłem prosty przykład.

function BasePage(name) { 
    this.init(name); 
} 

BasePage.prototype = { 
    init: function(name) { 
     this.name = name; 
    }, 
    getName: function() { 
     return this.name; 
    } 
} 

function FaqPage (name, faq) { 
    this.init(name, faq); 
} 

FaqPage.prototype = new BasePage(); 

FaqPage.prototype = { 
    init: function(name, faq) { 
     BasePage.prototype.init.call(this, name); 
     this.faq = faq; 
    }, 
    getFaq: function() { 
     return this.faq; 
    } 
} 

var faqPage = new FaqPage('Faq Page', 'Faq'); 

var text = faqPage.getName() + ' ' + faqPage.getFaq(); 
$('body').text(text); 

Wynikiem działania skutkuje następującym komunikatem:

Uncaught TypeError: Object #<Object> has no method 'getName'

Co chciałbym wiedzieć, w jaki sposób można wywołać metodę getName() w super klasy bez konieczności zastąpić i nazwać w podklasie?

Również jeśli moje, jeśli uważasz, że to podejście jest złe/dobre.

Answer 1

czuję ból. Jak wspomnieli inni, getName jest undefined, ponieważ zastępujesz prototype z . Dlatego nie będę powtarzać tego wyjaśnienia.

W związku z powyższym zgadzam się, że dobrze jest enkapsulować metody prototype w jednym zakresie. Być może w tym celu powinieneś użyć biblioteki JavaScript. Najmniejszy z nich to augment.W rzeczywistości jest to tylko 17 linii Long:

Function.prototype.augment = function (body) { 
    var base = this.prototype; 
    var prototype = Object.create(base); 
    body.apply(prototype, Array.from(arguments, 1).concat(base)); 
    if (!Object.ownPropertyOf(prototype, "constructor")) return prototype; 
    var constructor = prototype.constructor; 
    constructor.prototype = prototype; 
    return constructor; 
}; 

(function funct() { 
    var bind = funct.bind; 
    var bindable = Function.bindable = bind.bind(bind); 
    var callable = Function.callable = bindable(funct.call); 
    Object.ownPropertyOf = callable(funct.hasOwnProperty); 
    Array.from = callable([].slice); 
}()); 

Oto jak kod będzie wyglądać, jeśli użyto augment:

var BasePage = Object.augment(function() { 
    this.constructor = function (name) { 
     this.name = name; 
    }; 

    this.getName = function() { 
     return this.name; 
    }; 
}); 

var FaqPage = BasePage.augment(function (base) { 
    this.constructor = function (name, faq) { 
     base.constructor.call(this, name); 
     this.faq = faq; 
    }; 

    this.getFaq = function() { 
     return this.faq; 
    }; 
}); 

Wtedy można go używać tak jak zwykle:

var faqPage = new FaqPage("Faq Page", "Faq"); 
var text = faqPage.getName() + " " + faqPage.getFaq(); 
$("body").text(text); 

Nadzieja, która pomaga.

Answer 2

Ten błąd występuje, ponieważ pomimo ustawienia prototypu FaqPage na instancję BasePage, następna linia natychmiast go zastąpi. Tak więc FaqPage nie dziedziczy po BasePage. Dodaj Właściwości/metod prototypu FaqPage „s zamiast definiowania go po raz drugi:

FaqPage.prototype.init = function(name, faq) { 
    BasePage.prototype.init.call(this, name); 
    this.faq = faq; 
} 
FaqPage.prototype.getFaq = function() { 
    return this.faq; 
} 

Answer 3

Pierwsza linia ma rację, stworzenie prototypu z obiektu bazowego.

FaqPage.prototype = new BasePage(); 

Ale potem go nadpisać, tak samo nie dziedziczy obiekt bazowy już

FaqPage.prototype = { 
    init: function(name, faq) { 
     BasePage.prototype.init.call(this, name); 
     this.faq = faq; 
    }, 
    getFaq: function() { 
     return this.faq; 
    } 
} 

Zamiast definiować całą prototyp, zastąpić tylko poszczególne funkcje:

FaqPage.prototype.init = function(name, faq) { 
    BasePage.prototype.init.call(this, name); 
    this.faq = faq; 
}; 

FaqPage.prototype.getFaq = function() { 
    return this.faq; 
}; 

Answer 4

Jeśli dziedziczenie jest to, o co prosisz, nie jest to łatwe do osiągnięcia w JavaScript, o ile wiem. Użyłem tego fragmentu przez Johna Resiga i działa jak czar. http://ejohn.org/blog/simple-javascript-inheritance/

W twoim przypadku to jest, jak to działa,

BasePage

var BasePage = Class.extend({ 
    init: function(name){ 
    this.name = name; 
    }, 
getName: function(){ 
    return this.name; 
} 
}); 

klasę Faqpage dziedziczenie BasePage

var FaqPage = BasePage.extend({ 
    init: function(name, faq){ 
    this._super(name); 
    this.faq = faq; 
    }, 
    getFaq: function() { 
    return this.faq; 
    } 
}); 

A potem

var faqPage = new FaqPage('Faq Page', 'Faq'); 
var text = faqPage.getName() + ' ' + faqPage.getFaq(); 
$('body').text(text); 

Oczywiście, aby to działało, musisz dołączyć kod implementacji na stronie, którą połączyłem.

Oto skrzypce, http://jsfiddle.net/c8yjY/