JavaScript——ES 5とES 6は対象に向かってプログラミングして継承を実現します.

ES 5継承実現
厳密には、ES 5にはクラスと継承の概念がありませんが、オブジェクト指向プログラミングを理解するためには、まず構造関数がクラスであると考えています.ES 5の継承はさまざまな方法がありますが、具体的には「javascript高級プログラム設計」という本を見ることができます.ネット上では他の継承実現に関する具体的な紹介もたくさんあります.ここでは一番いい方法を挙げました.
もしthisに対する理解が足りないなら、私のもう一つのブログJavaScriptを参考にしてもいいです.――thisの理解とcall、apply、bindの使用は皆さんに役に立ちます.

function Father(opt) {
    this.name = opt.name;
    this.age = opt.age;
    this.height = opt.height;
}
Father.prototype = {
    constructor: Father,
    say: (value) {
        alertvalue)
    }
}

function Child(opt) {
    Father.call(opt); //              
}

inherits(Child, Father);
Child.prototype.eat = function() {} //         
//         
function inherits(Child, Father) {
    var C= function () {};
    C.prototype = Father.prototype;
    Child.prototype = new C();
    Child.prototype.constructor = Child;
}

ES 6継承実現
ES 6は、classキーワードの作成クラスを追加しました.extensとsuperキーワードによってクラスの継承ができます.

class Father {
    constructor(opt) {
        this.name = opt.name;
        this.age = opt.age;
        this.height = opt.height;
    }  //  ：         ，         
    say (value) {
        alertvalue)
    }
}
class Child extends Father {
    constructor(opt) {
        super(opt) //    ，  ，super       ,      this   
        this.sex = opt.sex;
    }
    eat() { //       

    }
}

上から見れば、ES 6の継承はずっと便利です.
ES 5とES 6の継承の違い
以下は私がまとめた以上の2つの方法で対象継承に向けた違いを実現します.

ES 5のクラス自体は関数として呼び出すことができ、newキーワードによってインスタンスオブジェクトを作成することもできます.クラスによって作成されたクラスは、newキーワードでクラスのインスタンスオブジェクトを作成するだけです.

による静的方法の追加の仕方は異なり、ES 5は直接Father.fn = function(){}を介して行われる.ES 6スタティック・キーによるスタティック方法

の追加

class Father {
    constructor(opt) {
        this.name = opt.name;
        this.age = opt.age;
        this.height = opt.height;
    } 
    static sleep () {

    }
}

ES 6の類の属性はconstructorにしか書けませんが、原型の本質は対象ですので、原型に属性を加えることができます.

は、概してES 6の継承がより便利であり、理解しやすい

である.
簡単な例
以下はパッケージを継承することによって簡単なフレーム例であり、オブジェクト指向プログラミングの実用的な応用と継承に対する理解のみを提供する.
html数:

<div id="alert">
    <div id="info">
        <span>×span>
        <p>       p>
        <div>         div>
    div>
div>

css:

* {
    margin: 0;
    padding: 0;
}
#alert {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, .3);
}
#info {
    width: 500px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 10%;
    margin-left: -250px;
    background: #eee;
    border-radius: 5px;
    color: #333;
}
#info p {
    height: 20%;
    text-indent: 20px;
    background: #1CB21C;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
}
#info span {
    position: absolute;
    right: 10px;
    font-size: 28px;
    display: inline-block;
    color: #fff;
    cursor: pointer;
}
#info span:hover {
    color: #eee;
}
#info div {
    height: 80%;
    text-align: center;
    font-size: 30px;
}
#info p:before,  #info div:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

js部分(ES 5実装):

function Alert(opt) {
    if(typeof opt.el !== "string") {
        throw Error("           id");
    }

    this._el = document.getElementById(opt.el.slice(1));
    this._info = document.getElementById("info");
    this._title = this._el.getElementsByTagName("p")[0];
    this._content = this._el.querySelector("#info div");
    this._close = this._el.querySelector("#info span");

    this._title.innerHTML = opt.title || "title";
    this._content.innerHTML = opt.content || "content";
    this._autoClose = !!opt.autoClose;

    this._el.onclick = function(e) {
        e.stopPropagation()
        this.close();
    }.bind(this)

    this._info.onclick = function(e) {
        e.stopPropagation()
    }

    this._close.onclick = function() {
        this.close();
    }.bind(this)

    this.close();
}
Alert.prototype = {
    constructor: Alert,
    open: function() {
        this._el.style.display = "block";
        if(this._autoClose) {
            setTimeout(this.close.bind(this), 2000);
        }
        return this;
    },
    close: function() {
        this._el.style.display = "none";
        return this;
    }
}

function Alert_child(opt) {
    Alert.call(this, opt);
    this.props = opt.props || {};
}

function C() {}
C.prototype = Alert.prototype;
Alert_child.prototype = new C();

Alert_child.prototype.render = function() {
    var props = JSON.stringify(this.props).replace(/\s|\r|
/g, "");
    if(props.length === 2) {
        console.error("props    !")
    } else {
        for(var key in this.props) {
            var propArr = key.split("_");
            var el = "_" + propArr[0];

            this[el].style[propArr[1]] = this.props[key];
        }
    }
    return this;
}

const alert1 = new Alert_child({
    el: "#alert",
    title: "    warning   title", //  title
    content: "            ！", //  content
    autoClose: true, //  false
    props: {
        title_background: "orange",
        content_fontSize: "18px"
    }
})

document.onclick = function() {
    alert1.render().open();
}

js部分(ES 6実装):

class Alert {
    constructor(opt) {
        if(typeof opt.el !== "string") {
            throw Error("           id");
        }

        this._el = document.getElementById(opt.el.slice(1));
        this._info = document.getElementById("info");
        this._title = this._el.getElementsByTagName("p")[0];
        this._content = this._el.querySelector("#info div");
        this._close = this._el.querySelector("#info span");

        this._title.innerHTML = opt.title || "title";
        this._content.innerHTML = opt.content || "content";
        this._autoClose = !!opt.autoClose;

        this._el.onclick = function(e) {
            e.stopPropagation()
            this.close();
        }.bind(this)

        this._info.onclick = function(e) {
            e.stopPropagation()
        }

        this._close.onclick = function() {
            this.close();
        }.bind(this)

        this.close();
    }
    open() {
        this._el.style.display = "block";
        if(this._autoClose) {
            setTimeout(this.close.bind(this), 2000);
        }
        return this;
    }
    close() {
        this._el.style.display = "none";
        return this;
    }
}
class Alert_child extends Alert {
    constructor(opt) {
        super(opt);
        this.props = opt.props;
    }
    render() {
        var props = JSON.stringify(this.props).replace(/\s|\r|
/g, "");
        if(props.length === 2) {
            console.error("props    !")
        } else {
            for(var key in this.props) {
                var propArr = key.split("_");
                var el = "_" + propArr[0];

                this[el].style[propArr[1]] = this.props[key];
            }
        }
        return this;
    }
}
const alert1 = new Alert_child({
    el: "#alert",
    title: "    warning   title", //  title
    content: "            ！", //  content
    autoClose: true, //  false
    props: {
        title_background: "orange",
        content_fontSize: "18px"
    }
})

document.onclick = function() {
    alert1.render().open();
}