老生常谈JS中的继承及实现代码
JS虽然不像是JAVA那种强类型的语言，但也有着与JAVA类型的继承属性，那么JS中的继承是如何实现的呢？
一、构造函数继承
在构造函数中，同样属于两个新创建的函数，也是不相等的
functionFn(name){
this.name=name;
this.show=function(){
alert(this.name);
}
}
varobj1=newFn("AAA");
varobj2=newFn("BBB");
console.log(obj1.show==obj2.show);//false
此时可以看出构造函数的多次创建会产生多个相同函数，造成冗余太多。
利用原型prototype解决。首先观察prototype是什么东西
functionFn(){}
console.log(Fn.prototype);
//constructor表示当前的函数属于谁
//__proto__==[[prototype]]，书面用语，表示原型指针
varfn1=newFn();
varfn2=newFn();
Fn.prototype.show=function(){
alert(1);
}
console.log(fn1.show==fn2.show);//ture
此时，任何一个对象的原型上都有了show方法，由此得出，构造函数Fn.prototype身上的添加的方法，相当于添加到了所有的Fn身上。
二、call和applay继承
functionFather(skill){
this.skill=skill;
this.show=function(){
alert("我会"+this.skill);
}
}
varfather=newFather("绝世木匠");
functionSon(abc){
//这里的this指向函数Son的实例化对象
//将Father里面的this改变成指向Son的实例化对象，当相遇将father里面所有的属性和方法都复制到了son身上
//Father.call(this,abc);//继承结束，call适合固定参数的继承
//Father.apply(this,arguments);//继承结束，apply适合不定参数的继承
}
father.show()
varson=newSon("一般木匠");
son.show();
三、原型链继承(demo)
这个的么实现一个一个简单的拖拽，a->b的一个继承。把a的功能继承给b。
HTML:
CSS:
*{margin:0;padding:0;}
#drag1{width:100px;height:100px;background:red;position:absolute;}
#drag2{width:100px;height:100px;background:black;position:absolute;left:500px;}
JS:
functionDrag(){}
Drag.prototype={
constructor:Drag,
init:function(id){
this.ele=document.getElementById(id);
this.cliW=document.documentElement.clientWidth||document.body.clientWidth;
this.cliH=document.documentElement.clientHeight||document.body.clientHeight;
varthat=this;
this.ele.onmousedown=function(e){
vare=event||window.event;
that.disX=e.offsetX;
that.disY=e.offsetY;
document.onmousemove=function(e){
vare=event||window.event;
that.move(e);
}
that.ele.onmouseup=function(){
document.onmousemove=null;
}
}
},
move:function(e){
this.x=e.clientX-this.disX;
this.y=e.clientY-this.disY;
this.x=this.x<0?this.x=0:this.x;
this.y=this.y<0?this.y=0:this.y;
this.x=this.x>this.cliW-this.ele.offsetWidth?this.x=this.cliW-this.ele.offsetWidth:this.x;
this.y=this.y>this.cliH-this.ele.offsetHeight?this.y=this.cliH-this.ele.offsetHeight:this.y;
this.ele.style.left=this.x+'px';
this.ele.style.top=this.y+'px';
}
}
newDrag().init('drag1')
functionChidrenDrag(){}
ChidrenDrag.prototype=newDrag()
newChidrenDrag().init('drag2')
四、混合继承
functionFather(skill,id){
this.skill=skill;
this.id=id;
}
Father.prototype.show=function(){
alert("我是father,这是我的技能"+this.skill);
}
functionSon(){
Father.apply(this,arguments);
}
//如果不做son的原型即成father的原型，此时会报错：son.showisnotafunction
Son.prototype=Father.prototype;
//因为，如果不让son的原型等于father的原型，son使用apply是继承不到原型上的方法
//但这是一种错误的原型继承示例，如果使用这种方式，会导致修改son原型上的show方法时，会把father身上的show也修改
//内存的堆和栈机制
Son.prototype.show=function(){
alert("我是son,这是我的技能"+this.skill);
}
varfather=newFather("专家级铁匠","father");
varson=newSon("熟练级铁匠","son");
father.show();
son.show();
上面的示例应该修改成以下形式：
以上红色的代码应改成：
for(variinFather.prototype){
Son.prototype[i]=Father.prototype[i];
}
//遍历father的原型身上的所有方法，依次拷贝给son的原型，这种方式称为深拷贝
这种继承方式叫做混合继承，用到了for-in继承，cell和apple继承。
五、Es6的class继承（demo）
这个demo的功能和原型链继承的demo功能一样，a->b的继承
HTML: