JavaScript "rozszerzanie" metody w pod-obiekcie lub podklasie - javascript, object, extending

Moim celem jest mieć obiekt widgetu i mieć gookreślone widżety rozszerzają ten obiekt. Chciałbym, aby ludzie nie musieli jawnie wywoływać wywołania zwrotnego renderowania w każdej definicji widżetu, w jakiś sposób rozszerzając go w obiekcie nadrzędnym (Widget). Jaki jest najlepszy sposób na osiągnięcie tego?

 var Widget = function (options) {

// super class

if (this.constructor === Widget) {
throw new Error("You can"t instantiate abstract class.");
}

var widget = this.__proto__;

Widget.renderCallBack = function(){
//alert("the widget has rendered");
}

this.render = (function(){
var _render = this.render;

return function(){
_render();
Widget.renderCallBack();
}

})


}
Widget.constructor = Widget;


var SpecialWidget = function(options) {
Widget.apply(this, arguments);
}

SpecialWidget.prototype = Object.create(Widget);
SpecialWidget.constructor = SpecialWidget

SpecialWidget.prototype.render = function(){
// render something
}

new SpecialWidget(options);

Odpowiedzi:

Oprócz mojego komentarza: jeśli jest taki sam dla wszystkich, nie musi to być funkcja oddzwaniania, po prostu umieść kod na końcu render metoda, jeśli jej zadanie jest synchroniczne, jeśli nie skorzystasz z obietnicy, ale musisz pomyśleć o metodzie cieniowania, zastąpisz klasę nadrzędną. render metoda u dziecka. Aby tego uniknąć, możesz użyć innej nazwy dla metod i wywołać metodę rodzica z potomka lub użyć klasy ES2015, która ma super słowo kluczowe do osiągnięcia metod klasy nadrzędnej.

Miałeś też literówkę w kodzie:

SpecialWidget.prototype = Object.create(Widget);

To musi być:

SpecialWidget.prototype = Object.create(Widget.prototype);

W każdym razie nie sądzę, że jest to ogólnie dobry pomysł.

var Widget = function(options) {
this.options = options || {};
};

Widget.prototype.widgetRender = function() {
// do stuff
console.log("Widget render");
// callback functionality
console.log("Widget render callback functionality");
};
Widget.constructor = Widget;


var SpecialWidget = function(options) {
Widget.apply(this, arguments);
};

SpecialWidget.prototype = Object.create(Widget.prototype);
SpecialWidget.prototype.render = function() {
// parent"s render
this.widgetRender();
// do stuff
console.log("SpecialWidget render");
// callback functionality
console.log("SpecialWidget render callback functionality");
};
SpecialWidget.constructor = SpecialWidget

var sw = new SpecialWidget();
sw.render();

// ES2015

class ES6Widget {
constructor(options) {
this.options = options || {};
}
render() {
// do stuff
console.log("ES6Widget render");
// callback functionality
console.log("ES6Widget render callback functionality");
}
}

class ES6SpecialWidget extends ES6Widget {
render() {
// parent"s render
super.render();
// do stuff
console.log("ES6SpecialWidget render");
// callback functionality
console.log("ES6SpecialWidget render callback functionality");
}
}


const es6sw = new ES6SpecialWidget();
es6sw.render();