美文网首页
继承、多态

继承、多态

作者: yamei_wu | 来源:发表于2017-10-13 09:02 被阅读0次

    继承的应用
    这个继承是相当神奇的了!写父类元素用了几十行代码,而这里只用了三行把父类具有的行为动作都继承过来,话说回来这个叫法很贴切呢
    这里为了简化代码,构造父类函数时,我们将它封装成一个js文件

    原型

    找原型对象有2个办法:
    1.构造函数名.prototype
    2.对象名.proto

    <script src="DragBox.js"></script>
            
    new DragBox("box1");
    

    它的作用是完成拖拽,包括开始(按键按下,移动)、停止两个过程。那么我只需要new DragBox()并且给它传一个参数,就能实现,你想new几个new几个,简直酷毙。

    多态效果

    这里想实现多态效果,那我们再构造一个函数,作用是在父类的基础上添加东西,比如在div中显示文本,控制它的拖拽范围等等

    1.添加显示文本
            function DragBoxText(boxId) {
                // 继承 DragBox 的属性
                DragBox.call(this, boxId);
            }
            // 继承 DragBox 的方法(开始、停止)
            DragBoxText.prototype = new DragBox();
    
            //  修改了父亲了的方法
            
            DragBoxText.prototype.move = function(x, y) {
                //this.ele.style.left = x + "px";
                //this.ele.style.top = y + "px";
                DragBox.prototype.move.call(this, x, y)
    
                this.ele.innerHTML = "left:"+x + " " + "top:"+y;
            }
            
            
            new DragBoxText("box2");
    
    2.控制活动范围(不能离开左上边界等)
    function DragBoxNotOut(boxId) {
                // 继承 DragBox 的属性
                DragBox.call(this, boxId);
            }
            // 继承 DragBox 的方法(开始、停止)
            DragBoxNotOut.prototype = new DragBox();
    
            //  修改了父亲了的方法
            
            DragBoxNotOut.prototype.move = function(x, y) {
                
                this.ele.style.left = x + "px";
                this.ele.style.top = y + "px";
    
                if(x<0){
                    this.ele.style.left = 0+ "px";
                }
                if(y<0){
                    this.ele.style.top = 0 + "px";
                }
    
            }
        
        new DragBoxNotOut("box1");
    

    这样一来,我们就有了三个div,它们都具有拖拽功能,同时会具有自己的额外个性.

    疑惑

    这里在修改父类move方法时遇到 一个疑惑:

            DragBoxText.prototype.move = function(x, y) {
                //this.ele.style.left = x + "px";
                //this.ele.style.top = y + "px";
                DragBox.prototype.move.call(this, x, y)
    
                this.ele.innerHTML = "left:"+x + " " + "top:"+y;
            }
    

    注销了//this.ele.style.left = x + "px";
    //this.ele.style.top = y + "px";
    以后还可以移动div,而在
    DragBoxNotOut.prototype.move
    中却是不行的?
    今天时间比较紧,就先说这么多,好些还没搞清楚,比如上面的问题,后面还需要再花时间好好弄清楚的嘞!

    相关文章

      网友评论

          本文标题:继承、多态

          本文链接:https://www.haomeiwen.com/subject/oswayxtx.html