jsButtonClassExample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
</head>
<body>
    <script>
        'use strict'

        class Button {
            constructor(name, width, height) {
                this._name = name;
                this._styles = [{ name: 'width', value: width }, { name: 'height', value: height }];
            }

            getName() { return this._name; }
            setName(name) { this._nmae = name; }
            _getStyle(styleName) {
                return this._styles.find((it) => {
                    if (it.name == styleName) {
                        return it;
                    }
                })
            }
            _setStyle(styleName, value) { this._getStyle(styleName).value = value; }
            getSize() {
                return { width: this._getStyle('width').value, heigth: this._getStyle('height').value };
            }
            setSize(width, height) {
                this._setStyle('width', width);
                this._setStyle('height', height);
            }
            toStyle() {
                return this._styles.reduce((prev, it) => {
                    return `${prev}${it.name}: ${it.value}; `
                }
                    , '')
            }
            toHtml() {
                return `<button style="${this.toStyle()}">${this._name}</button>`;
            }
            render() { document.writeln(this.toHtml()); }

        }

        class BootstrapButton extends Button {
            constructor(name, width, height, color) {
                super(name, width, height);
                this._styles.push({ name: 'color', value: color });
            }
            getColor() { return this._getStyle('color').value; }
            setColor(color) { this._setStyle('color', color); }
        }

        {
            let btn1 = new Button('Push ME!', '80px', '20px');
            btn1.render();

            let btn2 = new Button('DO NOT TOUCH ME!', '150px', '40px');
            btn2.render();

            let bbtn1 = new BootstrapButton('Colored!', '100px', '40px', 'red');
            bbtn1.render();
        }
    </script>
</body>
</html>