面向对象——————拖拽与继承

和上一篇的面向对象的选项卡差不多，先将面向过程的拖拽改写成面向对象的拖拽，然后再加上继承就好了。

面向过程的拖拽：

<script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById('div1');
                oDiv.onmousedown=function(ev){
                    var oEvent=ev||event;
                    var disX=oEvent.clientX-oDiv.offsetLeft;
                    var disY=oEvent.clientY-oDiv.offsetTop;
                    document.onmousemove=function(ev){
                        var oEvent=ev||event;
                        oDiv.style.left=oEvent.clientX-disX+'px';
                        oDiv.style.top=oEvent.clientY-disY+'px';
                    }
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    }
                }
                
            }
        </script>

面向对象的拖拽：

<script type="text/javascript">
            window.onload=function(){
                new Drag('div1');
            };
            
        function Drag(id){
                var _this=this;
                this.disX=0;
                this.disY=0;
                this.oDiv=document.getElementById(id);
                this.oDiv.onmousedown=function(ev){
                    _this.fnDown(ev);
                };
                
            }
            Drag.prototype.fnDown=function (ev){
                    var _this=this;
                    var oEvent=ev||event;
                    this.disX=oEvent.clientX-this.oDiv.offsetLeft;
                    this.disY=oEvent.clientY-this.oDiv.offsetTop;
                    document.onmousemove=function(ev){
                        _this.fnMove(ev);
                    };
                    document.onmouseup=function(){
                        _this.fnDown(this);
                    };
                }
            Drag.prototype.fnMove=function (ev){
                
                        var oEvent=ev||event;
                        this.oDiv.style.left=oEvent.clientX-this.disX+'px';
                        this.oDiv.style.top=oEvent.clientY-this.disY+'px';
                    }
            Drag.prototype.fnUp=function (){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    }
        </script>

继承：继承父类的属性和方法。

属性通过call来继承，原型通过一个for循环来实现继承。

如下：

function LimitDrag(id){
    Drag.call(this,id);     //继承父类Drag
    
};
for(var i in Drag.prototype){
    LimitDrag.prototype[i]=Drag.prototype[i];
}
LimitDrag.prototype.fnMove=function (ev){         //将父类fnMove重写（会把原来的覆盖从而生成子类新的特性——限制范围）。
                
                        var oEvent=ev||event;
                        var l=oEvent.clientX-this.disX;
                        var t=oEvent.clientY-this.disY;
                        if(l<0)
                        {
                            l=0;
                        }
                        else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){
                            l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
                        }
                        this.oDiv.style.left=l+'px';
                        this.oDiv.style.top=t+'px';
                };

 

谈谈系统对象：

1，宿主对象：由浏览器提供的对象。（通常是DOM，BOM。但是Node.js不一样了，它是在后台编写JS，所以它有一套新的宿主对象，而不再是DOM，BOM了）

2，本地对象（与内置对象都是JS本身所具有的，没得的话就不叫JS了）

          即非静态对象，常用：Object,Function,Date,Array,String,Boolean,Number,RegExp

3，内置对象

       即静态对象，Global与Math

                  Global：仅存在于概念里，用来让全局变量什么的进行归属，不能使用。

                  Math：直接能用，不需要实例化。