ECMAScript6 中 类的封装与继承

Posted 2020-08-05 沉睡的码农

ECMASCRIPT6中实现了class关键字，这样使我们更容易也更形象的进行类的操作

<script type="text/javascript">
    class OFunction{
        constructor(args){
        }
        setValue(val){
            if(val !== undefined && val != null){
                return val;
            }else{
                return ‘‘;
            }
        }
    }
    class Box extends OFunction{
        constructor(args){
            super(args);
            this.width = super.setValue(args.width) !== ‘‘ ? this.args.width : ‘120‘; 
            this.height = super.setValue(args.height) !== ‘‘ ? this.args.height : ‘60‘;
        }
    }
    class Popup extends Box{
        constructor(args){
            super(args);
            this.args = super.setValue(args) !==‘‘ ? args : {} ;
            this.position = super.setValue(args.position) !== ‘‘ ? this.args.position : ‘center‘;  //the position of this popup;
            this.backgroundColor = super.setValue(args.bg) !== ‘‘ ? this.args.bg : ‘rgba(0,0,0,.6)‘;  //the background-color of this popup;
        }
        getPosition(){
            return this.position;
        }
        getBackgroundColor(){
            return this.backgroundColor + this.more();
        }    
    }
        
    var args={‘position‘:‘left‘,‘bg‘:‘red‘};
    var p=new Popup(args);
    console.log(p.getBackgroundColor())
</script>

上面代码是我用来封装弹出框的一个原型（初级版）

OFunction是用来封装常用方法的方法类，这里面封装了setValue方法，用来判断参数是否为空或未定义

Box类是用来定义盒子模型，因为盒子模型既可以作为popup的父类，也可以被其他类集成。Box继承了OFunction类，这样可以获得OFucntion里面所有的方法和属性（当然是公有的，目前ECMASCRIPT6中static关键字还没有实现，可以借助以前定义私有变量和方法的方法来定义私有属性）。

Popup类继承自Box类，可以继承到Box类的所有属性和方法，同时获得OFunction类的所有方法属性。 

constructor方法相当于C++/Java/Python等面向对象语言中的__init__()方法，在类实例化的时候执行

这里面需要注意的是super关键字，在使用extends继承时，需要在construtor中声明super，同时通过super关键字获取到父类中的方法和属性，super关键字需要在constructor方法进入的时候声明，不然会报错。

--------------------------------继续完善此原型中-----------------------------------------------