JS-面向对象 使用ES5实现继承

JS-面向对象

1.构造函数的继承

 java面向对象的三大特性，封装，继承，多态，
 ES6以前是没有语法实现继承的，但我们可以通过代码做到继承的效果
 ES6后可以使用class类   

 var Ball = function(type,style,parent){
            this.speed = 10;
            this.t = null;
            console.log(this)
            this.elem = this.createDom(type,style,parent)
            this.bool = false;
            this.elem.addEventListener("click",this.move.bind(this));
            return this.elem
        }
        Ball.prototype.createDom = function(type,style,parent){
            var ele = document.createElement(type)
            //将后面的对象属性合并到第一个位置的属性 实现样式添加
            Object.assign(ele.style , style)
            if(typeof parent === "string") parent = document.querySelector(parent);
            parent.appendChild(ele)
            return ele
        }
        Ball.prototype.move = function(){
           //点击切换状态
            this.bool = !this.bool ;
            if(!this.bool) {
                clearInterval(this.t);
                return
            }
            this.t =setInterval(function(){
                this.speed+=4;
                this.elem.style.left=this.speed+"px";
            }.bind(this),16)
            
        }

上面的代码是一个面向对象的小球，接下来实例化它

        var obj = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute"
        }
        var ele = new Ball("div",obj,"body")

接下来我们定义一个构造函数用来继承它；

       var obj1 = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute",
            top:"200px"
        }
        var sonBall =function(type,style,parent){
            Ball.call(this,type,style,parent)
        }
        function fn(){};//中间函数  用来保存propertype
        fn.prototype =Ball.prototype;
        sonBall.prototype = new fn()
        //构造函数会被覆盖 需要重新设置
        sonBall.prototype.constructor = sonBall;
        new sonBall("div",obj1,"body")

效果如下

02 设计模式-观察者模式

如此我们便实现了继承，在这个代码中，我们还可以继续优化，当我们实例化对象的时候，每个对象都创建了一个定时器，当数量多的时候 ，性能消耗是比较严重的，我们可以使用观察者模式来托管这些对象 用一个定时器来管理所有的元素。
首先 创建一个类 用来管理元素

function Message(){
    this.list = new Set();
    this.ids = 0;
}

Message.prototype.add=function (elem){
    this.list.add(elem);
    if(this.list.size===0 || this.ids)return;
    this.ids=setInterval(()=>this.animation(),16);
}

Message.prototype.remove = function(elem){
    if(!this.list.has(elem))return;
    this.list.delete(elem);
    if(this.list.size>0)return;
    clearInterval(this.ids);
    this.ids=0;
}

Message.prototype.animation=function(){
    this.list.forEach(value=>{
       if(value.change) value.change();
    })
}

其次 将小球代码稍作修改

 var message = new Message();
        var Ball = function(type,style,parent){
            this.speed = 10;
            this.t = null;
            this.x = 0;
            console.log(this)
            this.elem = this.createDom(type,style,parent)
            this.bool = false;
            this.elem.addEventListener("click",this.move.bind(this));
            return this.elem
        }
        Ball.prototype.createDom = function(type,style,parent){
            var ele = document.createElement(type)
            Object.assign(ele.style , style)
            if(typeof parent === "string") parent = document.querySelector(parent);
            parent.appendChild(ele)
            return ele
        }
        //修改处
        Ball.prototype.move = function(){
            this.bool = !this.bool ;
            if(this.bool) {
                message.add(this)
            }else{
                message.remove(this)
            }
        }
        //修改处
        Ball.prototype.change =function(){
            if(!this.bool)return;
            this.x++;
            this.elem.style.left=this.x+"px";
        }
        var obj = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute"
        }

        var obj1 = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute",
            top:"200px"
        }
        var ele = new Ball("div",obj,"body")
        var sonBall =function(type,style,parent){
            Ball.call(this,type,style,parent)
        }
        function fn(){};
        fn.prototype =Ball.prototype;
        sonBall.prototype = new fn()
        sonBall.prototype.constructor = sonBall;
        new sonBall("div",obj1,"body")