create-subclass.js

This is a function to implement inheritance using javascript, which is more concise and elegant than the commonly used inheritance.
这是一个使用javascript实现继承的方法，这个方法比常用的继承写法更精简和优雅（呵呵，我认为）。

---

repository

github

码云

Use

 var Subclass = SuperClass.create({     //attributes }, {     //prototype object attributes });

or

 var Subclass = SuperClass.create(function(/*arguments*/) {     //get arguments    return {        //attributes    } }, {     //prototype object attributes });

demo

Element

function Element(ctx, style) {    this.ctx = ctx;    this.style = style;}Element.prototype = {    paint: function () {    },    render: function () {        this.paint();    }};

Rect inherit the Element

var Rect = Element.create({    type: 'rect'}, {    shape: function () {        var s = this.style;        this.ctx.beginPath();        this.ctx.fillStyle = s.color;        this.ctx.rect(s.x, s.y, s.w, s.h);        this.ctx.fill();        this.ctx.closePath();    },    paint: function () {        this.shape();    }});

TextRect inherit the Rect

var TextRect = Rect.create(function (ctx, style, textStyle) {    return {        textStyle: textStyle    }}, {    text: function () {        var s = this.style;        var ts = this.textStyle;        this.ctx.beginPath();        this.ctx.fillStyle = ts.color;        this.ctx.font = ts.font;        this.ctx.textAlign = ts.textAlign;        this.ctx.textBaseline = ts.textBaseline;        this.ctx.fillText(ts.text, s.x + ts.x, s.y + ts.y);        this.ctx.closePath();    },    paint: function () {        this.shape();        this.text();    }});

The equivalent is the following code

Element

function Element(ctx, style) {    this.ctx = ctx;    this.style = style;}Element.prototype = {    paint: function () {    },    render: function () {        this.paint();    }};

Rect inherit the Element

function Rect() {    Element.apply(this, arguments);    this.type = 'rect';}Rect.prototype = Object.create(Element.prototype);Rect.prototype.constructor = Rect;Rect.prototype.super = Element;Rect.prototype.shape = function () {    var s = this.style;    this.ctx.beginPath();    this.ctx.fillStyle = s.color;    this.ctx.rect(s.x, s.y, s.w, s.h);    this.ctx.fill();    this.ctx.closePath();};Rect.prototype.paint = function () {    this.shape();};

TextRect inherit the Rect

function TextRect(ctx, style, textStyle) {    Rect.apply(this, arguments);    this.textStyle = textStyle;}TextRect.prototype = Object.create(Rect.prototype);TextRect.prototype.constructor = TextRect;TextRect.prototype.super = Rect;TextRect.prototype.text = function () {    var s = this.style;    var ts = this.textStyle;    this.ctx.beginPath();    this.ctx.fillStyle = ts.color;    this.ctx.font = ts.font;    this.ctx.textAlign = ts.textAlign;    this.ctx.textBaseline = ts.textBaseline;    this.ctx.fillText(ts.text, s.x + ts.x, s.y + ts.y);    this.ctx.closePath();};TextRect.prototype.paint = function () {    this.shape();    this.text();};

License

MIT © porky-prince