面向对象（一）

构造函数

当new去调用一个函数 ，函数中的this就是创建出来的对象，并且函数的返回值就是this(隐式返回)

 function CreatePerson(name) {
  this.name = name;
  this.showName = function() {
      alert(this.name);
  }
 }
 var p1 = new CreatePerson('张三');
 p1.showName();
 var p2 = new CreatePerson('李四');
 p2.showName();

  var a = 1;
       var b = a;
       b = 8;
       // alert(a); //1
       // alert(b); //8

       //赋址
       var a = [1,2,3];
       var b = a;
       b.push(4);
       // alert(a); //1,2,3,4
       // alert(b); //1,2,3,4

       var a = [1,2,3];
       var b = a;
       b = [1,2,3,4];// 在内存中重新开辟一块空间，这时候a和b之间就没有关系了
       // alert(a); //1,2,3
       // alert(b); //1,2,3,4

原型（prototype）

改写对象下的属性或者方法，让公用的属性或者方法在内存中只占一份。
能公用的属性或者方法写到原型中，不能公用的属性或者方法写到构造函数中。

 var arr = [1,2,3];
 var arr2 = [2,3,4];
  Array.prototype.sum = function() {
   var result = 0;
   for (let i = 0; i <  this.length; i++) {
       result += this[i];
   }
   return result;
  }
alert(arr.sum());//6
alert(arr2.sum());//9

普通方法要比原型的优先级高

var arr = [];
arr.num = 10;
Array.prototype.num = 30;
alert(arr.num);//10

先在把之前用普通方法写的用原型来实现

  function CreatePerson(name) {
        this.name = name;
       }
  CreatePerson.prototype.showName = function() {
        alert(this.name);
       }
    var p1 = new CreatePerson('张三');
    p1.showName();
    var p2 = new CreatePerson('张三ssss');
    p2.showName();

选项卡

 <div id="box">
       <input type="button" class='active' value='1' name="">
       <input type="button" value='2' name="">
       <input type="button" value='3' name="">
       <div class = 'show'>1</div>
       <div>2</div>
       <div>3</div>
   </div>

    <div id="box1">
       <input type="button" class='active' value='1' name="">
       <input type="button" value='2' name="">
       <input type="button" value='3' name="">
       <div class = 'show'>1</div>
       <div>2</div>
       <div>3</div>
   </div>
<script>
    window.onload = function() {
        var t = new Tab('box');
        t.init();
        var t1 = new Tab('box1');
        t1.init();
        t1.autoPlay();
    }
    function Tab(id) {
        this.oBox = document.getElementById(id);
        this.aInput = this.oBox.getElementsByTagName('input');
        this.aDiv = this.oBox.getElementsByTagName('div');
        this.iNow = 0;
    }
    Tab.prototype.init = function () {
        var _this = this;
        for (var i = 0; i < this.aInput.length; i++) {
            this.aInput[i].index = i;
            this.aInput[i].onclick = function () {

                _this.change(this);
            }
        }
    }
    Tab.prototype.change = function (obj) {
        for (var i = 0; i < this.aInput.length; i++) {
            this.aInput[i].className = '';
            this.aDiv[i].className = '';
        }
        obj.className = 'active';
        this.aDiv[obj.index].className = 'show';
    };

    Tab.prototype.autoPlay = function () {
        var _this = this;

        setInterval(function() {
            if (_this.iNow >= _this.aInput.length-1) {
                _this.iNow = 0;
            } else {
                _this.iNow++;
            }
            for (var i = 0; i < _this.aInput.length; i++) {
                    _this.aInput[i].className = '';
                    _this.aDiv[i].className = '';
                }
                _this.aInput[_this.iNow].className = 'active';
                _this.aDiv[_this.iNow].className = 'show';
        },2000);
    }
</script>

拖拽

   window.onload = function() {
            var drag = new Drag('box');
            drag.init();
        }
        function Drag(id) {
            this.obj = document.getElementById(id);
            this.disX = 0;
            this.disY = 0;
        }
        Drag.prototype.init = function() {
            var _this = this;
            this.obj.onmousedown = function() {
                 var ev = ev || window.event;
                _this.downFn(ev);
                return false;
            };
        }
        Drag.prototype.downFn = function (ev) {
            var _this = this;
            this.disX = ev.clientX - this.obj.offsetLeft;
            this.disY = ev.clientY - this.obj.offsetTop;
            document.onmousemove = function() {
                var ev = ev || window.event;
                _this.moveFn(ev);
            };
            document.onmouseup =this.upFn;
        }
        Drag.prototype.moveFn = function (ev) {
            var left = ev.clientX - this.disX;
            var top = ev.clientY - this.disY;
            var maxLeft = document.documentElement.clientWidth - this.obj.clientWidth;
            var maxTop = document.documentElement.clientHeight - this.obj.clientHeight;
            if (left < 0) {
                left = 0;
            } else if (left > maxLeft) {
                left = maxLeft;
            } 

            if(top < 100) {
                top = 0;
            } else if (top > maxTop) {
                top = maxTop;
            }
            this.obj.style.left =  left + 'px';
            this.obj.style.top =  top + 'px';
        }
        Drag.prototype.upFn = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        }