老生常談JS中的繼承及實(shí)現(xiàn)代碼

在構(gòu)造函數(shù)中，同樣屬于兩個(gè)新創(chuàng)建的函數(shù)，也是不相等的
 function Fn(name){
  this.name = name;
  this.show = function(){
   alert(this.name);
  }
 }
 var obj1 = new Fn("AAA");
 var obj2 = new Fn("BBB");
 console.log(obj1.show==obj2.show);  //false
 此時(shí)可以看出構(gòu)造函數(shù)的多次創(chuàng)建會(huì)產(chǎn)生多個(gè)相同函數(shù)，造成冗余太多。
 利用原型prototype解決。首先觀(guān)察prototype是什么東西
 function Fn(){}
 console.log(Fn.prototype);
 //constructor表示當(dāng)前的函數(shù)屬于誰(shuí)
 //__proto__ == [[prototype]]，書(shū)面用語(yǔ)，表示原型指針
 var fn1 = new Fn();
 var fn2 = new Fn();
 Fn.prototype.show = function(){
  alert(1);
 }
 console.log(fn1.show==fn2.show);  //ture
 此時(shí)，任何一個(gè)對(duì)象的原型上都有了show方法，由此得出，構(gòu)造函數(shù)Fn.prototype身上的添加的方法，相當(dāng)于添加到了所有的Fn身上。

function Father(skill){
  this.skill = skill;
  this.show = function(){
   alert("我會(huì)"+this.skill);
  }
 }
 var father = new Father("絕世木匠");
 function Son(abc){
  //這里的this指向函數(shù)Son的實(shí)例化對(duì)象
  //將Father里面的this改變成指向Son的實(shí)例化對(duì)象，當(dāng)相遇將father里面所有的屬性和方法都復(fù)制到了son身上
  //Father.call(this,abc);//繼承結(jié)束，call適合固定參數(shù)的繼承
  //Father.apply(this,arguments);//繼承結(jié)束，apply適合不定參數(shù)的繼承
 }
 father.show()
 var son = new Son("一般木匠");
 son.show();

 <div id="drag1"></div>
 <div id="drag2"></div>

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

function Drag(){}
  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;
    var that=this;
    this.ele.onmousedown=function(e){
     var e=event||window.event;
     that.disX=e.offsetX;
     that.disY=e.offsetY;
     document.onmousemove=function(e){
      var e=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';
   }
  }
  new Drag().init('drag1')
  function ChidrenDrag(){}
  ChidrenDrag.prototype=new Drag()
  new ChidrenDrag().init('drag2')

function Father(skill,id){
  this.skill = skill;
  this.id = id;
 }
 Father.prototype.show = function(){
  alert("我是father,這是我的技能"+this.skill);
 }
 function Son(){
  Father.apply(this,arguments);
 }
 //如果不做son的原型即成father的原型，此時(shí)會(huì)報(bào)錯(cuò)：son.show is not a function
 Son.prototype = Father.prototype;
 //因?yàn)?，如果不讓son的原型等于father的原型，son使用apply是繼承不到原型上的方法
 //但這是一種錯(cuò)誤的原型繼承示例，如果使用這種方式，會(huì)導(dǎo)致修改son原型上的show方法時(shí)，會(huì)把father身上的show也修改
 //內(nèi)存的堆和棧機(jī)制
 Son.prototype.show = function(){
  alert("我是son,這是我的技能"+this.skill);
 }
 var father = new Father("專(zhuān)家級(jí)鐵匠","father");
 var son = new Son("熟練級(jí)鐵匠","son");
 father.show();
 son.show();
 上面的示例應(yīng)該修改成以下形式：
 以上紅色的代碼應(yīng)改成：
 for(var i in Father.prototype){
  Son.prototype[i] = Father.prototype[i];
 }
 //遍歷father的原型身上的所有方法，依次拷貝給son的原型，這種方式稱(chēng)為深拷貝
 這種繼承方式叫做混合繼承，用到了for-in繼承，cell和apple繼承。

 <div id="drag1"></div>
 <div id="drag2"></div>

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

class Drag{
   constructor(id){
    this.ele=document.getElementById(id);
    this.init();
   };
   init(){
    var that=this;
    this.ele.onmousedown=function(e){
     var e=event||window.event;
     that.disX=e.offsetX;
     that.disY=e.offsetY;
     document.onmousemove=function(e){
      var e=event||window.event;
      that.move(e);
     }
     that.ele.onmouseup=function(){
      document.onmousemove=null;
      that.ele.onmouseup=null;
     }
    }
   };
   move(e){
    this.ele.style.left=e.clientX-this.disX+"px";
    this.ele.style.top=e.clientY-this.disY+"px";
   }
  }
  new Drag("drag1");
  class ExtendsDrag extends Drag{
   constructor(id){
    super(id);
   }
  }
  new ExtendsDrag("drag2")