对象继承

一、拷贝继承

1.什么是继承
　　在原有对象的基础上，略作修改，得到一个新的对象
　　不影响原有对象的功能
　　子类不影响父类，子类可以继承父类的一些功能（代码复用）
2.如何添加继承
　　属性：call
　　方法：for in

（一）属性的继承

//属性的继承：调用父类的构造函数，用call改变this指向
function CreatePerson(name,sex){//父类
	this.name=name;
	this.sex=sex;
}
CreatePerson.prototype.showName=function(){
	alert(this.name);
}
var p1=new CreatePerson('小明','男');
p1.showName();

function CreateStar(name,sex,job){//子类
	//继承父类
	CreatePerson.call(this,name,sex);
//	this.name=name;
//	this.sex=sex;
	this.job=job;
}

var p2=new CreateStar('黄晓明','男','演员');

（二）方法的继承

//var a={
//	name:'小明'
//};

//var b=a;
//b的name属性的修改影响了a的name属性，两者相互影响，解决办法用for in
//for(var attr in a){
//	b[attr]=a[attr];
//}
//var b={};
//extend(b,a);
//b.name='小强';
//alert(a.name);

//封装函数
function extend(obj1,obj2){
	for (var attr in obj2) {
		obj1[attr]=obj2[attr];
	}
}


function CreatePerson(name,sex){//父类
	this.name=name;
	this.sex=sex;
}
CreatePerson.prototype.showName=function(){
	alert(this.name);
}
var p1=new CreatePerson('小明','男');
p1.showName();

function CreateStar(name,sex,job){//子类
	//继承父类
	CreatePerson.call(this,name,sex);
//	this.name=name;
//	this.sex=sex;
	this.job=job;
}
//方法继承：for in 拷贝继承（jquery也是采用拷贝继承）
extend(CreateStar.prototype,CreatePerson.prototype);
var p2=new CreateStar('黄晓明','男','演员');
p2.showName();

（三）继承实例-拖拽

 

function Drag(id){
	this.oDiv=document.getElementById(id);
	this.disX=0;
	this.disY=0;
}
Drag.prototype.init=function(){
	var This=this;
	this.oDiv.onmousedown=function(ev){
		var ev=ev||window.event;
		This.fnDown(ev);
		//清除默认事件
        return false;
	}
}
Drag.prototype.fnDown=function(ev){
	var This=this;
    this.disX=ev.clientX-this.oDiv.offsetLeft;
    this.disY=ev.clientY-this.oDiv.offsetTop;
    
    //设置全局捕获
    //所有的onmousemove或者onmouseup都被oImg截获，然后作用在oImg身上
    if(this.oDiv.setCapture){
        this.oDiv.setCapture();
    }
    
    document.onmousemove=function(ev){
        var ev=ev||window.event;  
        This.fnMove(ev);
    };
    document.onmouseup=function(ev){
        var ev=ev||window.event;  
        This.fnUp(ev);
    };
}
Drag.prototype.fnMove=function(ev){
	var L=ev.clientX-this.disX;
    var T=ev.clientY-this.disY;
    
    this.oDiv.style.left=L+'px';
    this.oDiv.style.top=T+'px';
}
Drag.prototype.fnUp=function(){
    document.onmousemove=null;
    //释放全局捕获
    if(this.oDiv.releaseCapture){
        this.oDiv.releaseCapture();
    }
}

function extend(obj1,obj2){
    for (var attr in obj2) {
        obj1[attr]=obj2[attr];
    }
}

//继承父级的属性
function ChildDrag(id){
	Drag.call(this,id);
}
//继承父级的所有方法
extend(ChildDrag.prototype,Drag.prototype);
//子类独有的方法，限制范围
Drag.prototype.fnMove=function(ev){
	var L=ev.clientX-this.disX;
    var T=ev.clientY-this.disY;
    
    //限制拖拽范围
    //横向
    if(L<0){
        L=0;
    }else if(L>document.documentElement.clientWidth-this.oDiv.offsetWidth){
        L=document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }
    //纵向
    if(T<0){
        T=0;
    }else if(T>document.documentElement.clientHeight-this.oDiv.offsetHeight){
        T=document.documentElement.clientHeight-this.oDiv.offsetHeight;
    }
    
    this.oDiv.style.left=L+'px';
    this.oDiv.style.top=T+'px';
}


var dl=new Drag('div1');
dl.init();

var d2=new ChildDrag('div2');
d2.init();

二、其他继承方式

（一）类式继承

/*
 继承的其他形式
1.类式继承：利用构造函数（类）继承的方法
2.原型继承：借助原型来实现对象继承对象

 * */
//类式继承
//类：JS是没有类的概念的，把JS中的构造函数看作类
//要做属性和方法继承的时候，要分开继承
function Aaa(){//父类
	this.name='小明';
}
Aaa.prototype.showName=function(){
	alert(this.name);
}
function Bbb(){//子类
}

var F=function(){};
//F只继承Aaa的方法
F.prototype=Aaa.prototype;
Bbb.prototype=new F();
//修正指向问题
Bbb.prototype.constructor=Bbb;

var b1=new Bbb();
b1.name="小花";
b1.showName();

var b2=new Bbb();
b2.name="小豆";
b2.showName();
//alert(b1.name);