js中的继承

 1 在构造函数中，同样属于两个新创建的函数，也是不相等的 2 ?3 ????function Fn(name){ 4 ????????this.name = name; 5 ????????this.show = function(){ 6 ????????????alert(this.name); 7 ????????} 8 ????} 9 ????var obj1 = new Fn("AAA");10 ????var obj2 = new Fn("BBB");11 ????console.log(obj1.show==obj2.show); ???????//false12 ????13 ????此时可以看出构造函数的多次创建会产生多个相同函数，造成冗余太多。14 ????15 ????利用原型prototype解决。首先观察prototype是什么东西16 ????function Fn(){}17 ????console.log(Fn.prototype);18 ????//constructor表示当前的函数属于谁19 ????//__proto__ ?== ?[[prototype]]，书面用语，表示原型指针20 ?21 ????var fn1 = new Fn();22 ????var fn2 = new Fn();23 ????Fn.prototype.show = function(){24 ????????alert(1);25 ????}26 ????console.log(fn1.show==fn2.show); ????//ture27 ????28 ????此时，任何一个对象的原型上都有了show方法，由此得出，构造函数Fn.prototype身上的添加的方法，相当于添加到了所有的Fn身上。

 1 function Father(skill){ 2 ????????this.skill = skill; 3 ????????this.show = function(){ 4 ????????????alert("我会"+this.skill); 5 ????????} 6 ????} 7 ????var father = new Father("绝世木匠"); 8 ????function Son(abc){ 9 ????????//这里的this指向函数Son的实例化对象10 ????????//将Father里面的this改变成指向Son的实例化对象，当相遇将father里面所有的属性和方法都复制到了son身上11 ????????//Father.call(this,abc);//继承结束，call适合固定参数的继承12 ????????//Father.apply(this,arguments);//继承结束，apply适合不定参数的继承13 ????}14 ????father.show()15 ????var son = new Son("一般木匠");16 ????son.show();

HTML:
1 <div id="drag1"></div>2 <div id="drag2"></div>

CSS:
1 *{margin: 0;padding: 0;}2 #drag1{width: 100px;height: 100px;background: red;position: absolute;}3 #drag2{width: 100px;height: 100px;background: black;position: absolute;left: 500px;}

 JS: 
 1 function Drag(){} 2 ????????Drag.prototype={ 3 ????????????constructor:Drag, 4 ????????????init:function(id){ 5 ????????????????this.ele=document.getElementById(id); 6 ????????????????this.cliW=document.documentElement.clientWidth||document.body.clientWidth; 7 ????????????????this.cliH=document.documentElement.clientHeight||document.body.clientHeight; 8 ????????????????var that=this; 9 ????????????????this.ele.onmousedown=function(e){10 ????????????????????var e=event||window.event;11 ????????????????????that.disX=e.offsetX;12 ????????????????????that.disY=e.offsetY;13 ????????????????????document.onmousemove=function(e){14 ????????????????????????var e=event||window.event;15 ????????????????????????that.move(e);16 ????????????????????}17 ????????????????????that.ele.onmouseup=function(){18 ????????????????????????document.onmousemove=null;19 ????????????????????}20 ????????????????} ???????21 ????????????},22 ????????????move:function(e){23 ????????????????this.x=e.clientX-this.disX;24 ????????????????this.y=e.clientY-this.disY;25 ????????????????this.x=this.x<0?this.x=0:this.x;26 ????????????????this.y=this.y<0?this.y=0:this.y;27 ????????????????this.x=this.x>this.cliW-this.ele.offsetWidth?this.x=this.cliW-this.ele.offsetWidth:this.x;28 ????????????????this.y=this.y>this.cliH-this.ele.offsetHeight?this.y=this.cliH-this.ele.offsetHeight:this.y;29 ????????????????this.ele.style.left=this.x+‘px‘;30 ????????????????this.ele.style.top=this.y+‘px‘;31 ????????????}32 ????????}33 ????????new Drag().init(‘drag1‘)34 ????????function ChidrenDrag(){}35 ????????ChidrenDrag.prototype=new Drag()36 ????????new ChidrenDrag().init(‘drag2‘)

 1 function Father(skill,id){ 2 ????????this.skill = skill; 3 ????????this.id = id; 4 ????} 5 ????Father.prototype.show = function(){ 6 ????????alert("我是father,这是我的技能"+this.skill); 7 ????} 8 ?9 ????function Son(){10 ????????Father.apply(this,arguments);11 ????}12 ????//如果不做son的原型即成father的原型，此时会报错：son.show is not a function13 ????Son.prototype = Father.prototype;14 ????//因为，如果不让son的原型等于father的原型，son使用apply是继承不到原型上的方法15 ????//但这是一种错误的原型继承示例，如果使用这种方式，会导致修改son原型上的show方法时，会把father身上的show也修改16 ????//内存的堆和栈机制17 ????Son.prototype.show = function(){18 ????????alert("我是son,这是我的技能"+this.skill);19 ????}20 ????var father = new Father("专家级铁匠","father");21 ????var son = new Son("熟练级铁匠","son");22 ????father.show();23 ????son.show();24 25 ????上面的示例应该修改成以下形式：26 ????以上红色的代码应改成：27 ????for(var i in Father.prototype){28 ????????Son.prototype[i] = Father.prototype[i];29 ????}30 ????//遍历father的原型身上的所有方法，依次拷贝给son的原型，这种方式称为深拷贝31 32 ????这种继承方式叫做混合继承，用到了for-in继承，cell和apple继承。

HTML:1 <div id="drag1"></div>2 <div id="drag2"></div>

CSS:1 *{margin: 0;padding: 0;}2 #drag1{width: 100px;height: 100px;background: red;position: absolute;}3 #drag2{width: 100px;height: 100px;background: black;position: absolute;left: 500px;}

 JS:
 1 class Drag{ 2 ????????????constructor(id){ 3 ????????????????this.ele=document.getElementById(id); 4 ????????????????this.init(); 5 ????????????}; 6 ????????????init(){ 7 ????????????????var that=this; 8 ????????????????this.ele.onmousedown=function(e){ 9 ????????????????????var e=event||window.event;10 ????????????????????that.disX=e.offsetX;11 ????????????????????that.disY=e.offsetY;12 ????????????????????document.onmousemove=function(e){13 ????????????????????????var e=event||window.event;14 ????????????????????????that.move(e);15 ????????????????????}16 ????????????????????that.ele.onmouseup=function(){17 ????????????????????????document.onmousemove=null;18 ????????????????????????that.ele.onmouseup=null;19 ????????????????????}20 ????????????????}21 ????????????};22 ????????????move(e){23 ????????????????this.ele.style.left=e.clientX-this.disX+"px";24 ????????????????this.ele.style.top=e.clientY-this.disY+"px";25 ????????????}26 ????????}27 ????????28 ????????new Drag("drag1");29 ????????30 ????????class ExtendsDrag extends Drag{31 ????????????constructor(id){32 ????????????????super(id);33 ????????????}34 ????????}35 ????????36 ????????new ExtendsDrag("drag2")