javascript面向对象事件继承

继承：父类有的，子类也有。父类改变，子类也跟着变。

属性继承： 

    矫正this （window对象，矫正成object对象）

    fn .call(this是谁,参数1,参数2...);

    fn .apply(this是谁,[参数1,参数2...]);

    父类.apply(this,arguments);

方法继承：

    a).Worker.prototype = Person.prototype;

        问题：会触发引用 ，当改变worker的时候会改变Person的值

    b).

        for(var name in Person.prototype){

            Worker.prototype[name] = Person.prototype[name];

        }

 

        瑕疵：w1 instanceof Person         false

 

    c).

        Worker.prototype = new Person();

        瑕疵：w1.constructor 不等于Worker

 

    d).

        Worker.prototype = new Person();（原型链上赋值new Person所有的方法）

        Worker.prototype.constructor = Worker;（把它的构造函数指向worker）

---

面向对象写选项卡

function Tab(id){

    this.oBox = document.getElementById(id);

    this.aBtn = this.oBox.getElementsByTagName('input');

    this.aDiv = this.oBox.getElementsByTagName('div');

    this.iNow = 0;

    this.init();

}

Tab.prototype.init=function(){

    var _this = this;

    for(var i=0;i<this.aBtn.length;i++){

        this.aBtn[i].index = i;

        this.aBtn[i].onclick=function(){

            _this.iNow = this.index;

            _this.hide();

            _this.show();

        };

    }

};

Tab.prototype.hide=function(){

    for(var i=0;i<this.aBtn.length;i++){

        this.aBtn[i].className='';

        this.aDiv[i].className='';

    }

};

Tab.prototype.show=function(){

    this.aBtn[this.iNow].className='on';

    this.aDiv[this.iNow].className='on';

};

window.onload=function(){

    new Tab('div1');

}; 

---

面向对象写拖拽

function Drag(id){

    this.oDiv = document.getElementById(id);

    this.disX = 0;

    this.disY = 0;

    this.init();

};

Drag.prototype.init=function(){

    var _this = this;

    this.oDiv.onmousedown=function(ev){

        var oEvent = ev||event;

        _this.fnDown(oEvent);

        return false;

    };

};

Drag.prototype.fnDown=function(ev){

    var _this = this;

    this.disX = ev.clientX-this.oDiv.offsetLeft;

    this.disY = ev.clientY-this.oDiv.offsetTop;

    document.onmousemove=function(ev){

        var oEvent = ev||event;

        _this.fnMove(oEvent);

    };

    document.onmouseup=function(){

        _this.fnUp();

    };

    this.oDiv.setCapture&&this.oDiv.setCapture();

};

Drag.prototype.fnMove=function(ev){

    this.oDiv.style.left = ev.clientX-this.disX+'px';

    this.oDiv.style.top = ev.clientY-this.disY+'px';

};

Drag.prototype.fnUp=function(){

    document.onmousemove=null;

    document.onmouseup=null;

    this.oDiv.releaseCapture&&this.oDiv.releaseCapture();

};

window.onload=function(){

    new Drag('div1');

};