欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-08 20:30:29
js虽然不像是java那种强类型的语言,但也有着与java类型的继承属性,那么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中的继承及实现代码,希望对大家有所帮助