在構造函數中，同樣屬于兩個新創建的函數，也是不相等的 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 此時可以看出構造函數的多次創建會產生多個相同函數，造成冗余太多。 利用原型prototype解決。首先觀察prototype是什么東西 function Fn(){} console.log(Fn.prototype); //constructor表示當前的函數屬于誰 //__proto__ == [[prototype]]，書面用語，表示原型指針 var fn1 = new Fn(); var fn2 = new Fn(); Fn.prototype.show = function(){  alert(1); } console.log(fn1.show==fn2.show);  //ture 此時，任何一個對象的原型上都有了show方法，由此得出，構造函數Fn.prototype身上的添加的方法，相當于添加到了所有的Fn身上。

function Father(skill){  this.skill = skill;  this.show = function(){   alert("我會"+this.skill);  } } var father = new Father("絕世木匠"); function Son(abc){  //這里的this指向函數Son的實例化對象  //將Father里面的this改變成指向Son的實例化對象，當相遇將father里面所有的屬性和方法都復制到了son身上  //Father.call(this,abc);//繼承結束，call適合固定參數的繼承  //Father.apply(this,arguments);//繼承結束，apply適合不定參數的繼承 } 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的原型，此時會報錯：son.show is not a function Son.prototype = Father.prototype; //因為，如果不讓son的原型等于father的原型，son使用apply是繼承不到原型上的方法 //但這是一種錯誤的原型繼承示例，如果使用這種方式，會導致修改son原型上的show方法時，會把father身上的show也修改 //內存的堆和棧機制 Son.prototype.show = function(){  alert("我是son,這是我的技能"+this.skill); } var father = new Father("專家級鐵匠","father"); var son = new Son("熟練級鐵匠","son"); father.show(); son.show(); 上面的示例應該修改成以下形式： 以上紅色的代碼應改成： for(var i in Father.prototype){  Son.prototype[i] = Father.prototype[i]; } //遍歷father的原型身上的所有方法，依次拷貝給son的原型，這種方式稱為深拷貝 這種繼承方式叫做混合繼承，用到了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")