面向对象（一）

来源：互联网发布：大智慧股票数据接口编辑：程序博客网时间：2024/06/07 12:55

构造函数

当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());//6alert(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;        }

0 0