老生常谈JS中的继承及实现代码


            JS虽然不像是JAVA那种强类型的语言，但也有着与JAVA类型的继承属性，那么JS中的继承是如何实现的呢？

一、构造函数继承





在构造函数中，同样属于两个新创建的函数，也是不相等的

 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身上。



二、call和applay继承





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();



三、原型链继承(demo)

这个的么实现一个一个简单的拖拽，a->b的一个继承。把a的功能继承给b。

HTML:







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

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





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:  





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继承。



五、Es6的class继承（demo）

这个demo的功能和原型链继承的demo功能一样，a->b的继承

HTML:







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

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





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:







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")



我总结的这几种继承方法.两个demo继承的方法大家最好在编译器上跑一下，看看。这样才能更深刻的去理解。尤其是原型链的继承，js作为一个面向对象的编程语言，还是很常用的。

总结

以上所述是小编给大家介绍的JS中的继承及实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！