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


Posted in Javascript onJuly 06, 2018

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中的继承及实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
syntaxhighlighter 使用方法
Jul 02 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
前端如何实现动画过渡效果
Feb 05 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 #Javascript
vue.js计算属性computed用法实例分析
Jul 06 #Javascript
vue.js实现的绑定class操作示例
Jul 06 #Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 #Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 #Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 #Javascript
深入浅析AngularJs模版与v-bind
Jul 06 #Javascript
You might like
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP中list方法用法示例
2016/12/01 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
php服务器的系统详解
2019/10/12 PHP
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
python Socket之客户端和服务端握手详解
2017/09/18 Python
Django入门使用示例
2017/12/12 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
ET Mall东森购物网:东森严选
2017/03/06 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
电话客服工作职责
2014/07/27 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
2019各种保证书范文
2019/06/24 职场文书