JavaScript——ES5和ES6面向对象编程实现继承

约定不等于承诺〃 2022-05-19 02:44 262阅读 0赞

## ES5实现继承 ##

严格来说，ES5中没有类和继承的概念，但为了方便理解面向对象编程，姑且认为构造函数就是类，本身是一个函数。ES5实现继承有很多种方式，具体可查看《javascript高级程序设计》这本书，网上也有很多关于其他继承实现的具体介绍。这里我只列举了一种最优方式。

如果对this的理解不够深入，可以参考我的另外一篇博客[JavaScript——this的理解和call、apply、bind的使用][JavaScript_this_call_apply_bind]，希望对大家有所帮助！

## ES6实现继承 ##

ES6新增了一个class关键字创建类，可通过extends和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() { //子类的私有方法
    
        }
    }

由上面可以看出，ES6实现继承要方便多了

## ES5和ES6实现继承的不同之处 ##

下面是我总结的以上两种方式实现面向对象继承的不同之处：

*  ES5中的类本身是一个函数，可以当做函数调用，也可以通过new关键字创建实例对象；而通过class创建的类，只能通过new关键字创建类的实例对象。
 *  添加静态方法的方式不同，ES5直接通过 `Father.fn = function(){}` ；ES6通过static关键字添加静态方法

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

*  ES6中类的属性只能写在constructor中，而由于原型本质是一个对象，所以可以在原型中添加属性，但我们一般不这样做，原型中一般都放公用方法。
 *  总体来说ES6实现继承更加方便，且便于理解

## 一个简单的实例 ##

下面是一个通过继承封装的一个简单的弹框例子，仅供理解面向对象编程的实际应用和对于继承的理解。

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部分（ES5实现）:**

**js部分（ES6实现）：**

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|\n/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();
    }

[JavaScript_this_call_apply_bind]: https://blog.csdn.net/qq_33036599/article/details/81119379