javascript面向对象——继承
javascript和其他语言相比,它没有真正意义上的继承,也不能从一个父类extends,要实现它的继承可以通过其他方式来实现:
步骤:1.继承父类的属性 2.继承父类的原型
下面就以一个拖拽为例子:
//Drag.js function Drag(id){ var _this=this; this.oDiv=document.getElementById(id); this.disX=0; this.disY=0; this.oDiv.onmousedown=function(ev){ _this.fnDown(ev); return false; }; } Drag.prototype.fnDown=function(ev){ var _this=this; var oEvent=ev||event; this.disX=oEvent.clientX-this.oDiv.offsetLeft; this.disY=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function(ev){ _this.fnMove(ev); }; document.onmouseup=function(){ _this.fnUp(); }; }; Drag.prototype.fnMove=function(ev){ var oEvent=ev||event; this.oDiv.style.left=oEvent.clientX-this.disX+'px'; this.oDiv.style.top=oEvent.clientY-this.disY+'px'; }; Drag.prototype.fnUp=function(){ document.onmouseup=null; document.onmousemove=null; };
下面就是子类继承父类,不需要些多余的代码就可以实现拖拽功能:
//LimitDrag.js function LimitDrag(id){ //1.继承属性 通过call改变当前this指向,实现了给LimitDrag new出来的对象赋值 Drag.call(this, id); } //2.继承原型(object是引用类型) //若通过直接赋值子类会影响到父类的原型 LimitDrag.prototype=Drag.prototype; X for(var i in Drag.prototype){ LimitDrag.prototype[i]=Drag.prototype[i]; } //这里就实现了子类继承父类,没有写多余的代码就可以拖拽了 //=================================================================== //这里实现子类自己的方法,也不会影响父类 //限制拖拽范围 LimitDrag.prototype.fnMove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-this.disX; var t=oEvent.clientY-this.disY; if(l<0){ l=0; }else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){ l=document.documentElement.clientWidth-this.oDiv.offsetWidth; } if(t<0){ t=0; }else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){ t=document.documentElement.clientHeight-this.oDiv.offsetHeight; } this.oDiv.style.left=l+'px'; this.oDiv.style.top=t+'px'; };
javascript面向对象——继承的更多相关文章
- javaScript面向对象继承方法经典实现
转自原文javaScript面向对象继承方法经典实现 JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是Ja ...
- JavaScript面向对象—继承的实现
JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...
- JavaScript面向对象继承方法
JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来 ...
- JavaScript 面向对象继承详解
题记 由于js不像java那样是完全面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,一般都是基于原型链的方式: 一.继承初探 大多数JavaScript的实现用 __proto_ ...
- Javascript 面向对象-继承
JavaScript虽然不是面向对象的语言,但是我们通过构造可以让其支持面向对象,从而实现继承.重写等面向对象的特性.具体代码如下: //创建类Person function Person(age,n ...
- JavaScript面向对象--继承 (超简单易懂,小白专属)
一.继承的概念 子类共享父类的数据和方法的行为,就叫继承. 二.E55如何实现继承?探索JavaScript继承的本质 2.1构造函数之间的"复制粘贴" 第一条路是通过构造函数来继 ...
- JavaScript 面向对象继承的实现
<script type="text/javascript"> function Animal () { this.species="Animal" ...
- javascript面向对象继承和原型
一.理解什么是对象:任何东西都可以是对象,对象就是一组无序属性的集合 对象具有属性和方法1.1 属性的类型属性内部又定义了两种属性:数据属性和访问器属性 (1)数据属性:有4个描述的行为 Config ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
随机推荐
- Lucence.net索引技术 二
一. Lucene索引创建和优化 [版本2.9.0以上] Lucene索引的创建首先需要取得几个必须的对象: 1.分词器//可以采用其他的中文分词器 StandardAnalyzer analyzer ...
- php基础知识(很简单一套适合零基础的朋友学习)
红色的一般都是重点,还有自己的一些废话 运算符 算术运算符: 基本运算(除数不能为0) 比较运算符: 大小比较(类型比较), 如果两个类型不一样,系统会自动转换成统一类型 赋值运算符: 基本赋值和运算 ...
- A Byte of Python 笔记(10)输入/输出:文件和储存器
第12章 输入/输出 大多数情况下,我们需要程序与用户交互.从用户得到输入,然后打印一些结果. 可以分别使用 raw_input 和 print 语句来完成这些功能.对于输出,可以使用多种多样的 s ...
- 循环-10. 求序列前N项和(15)
#include<iostream>#include<iomanip>using namespace std;int main(){ double i,n,t,a,b; ...
- 去确认CP210x UART Bridge的USB的VID和PID
[背景] 之前买的USB口的HART猫: [记录]为USB接口的HART猫ExSaf ESH232U安装对应的USB转RS232驱动 其中内部是USB转RS232. 然后打算去看看之前的自己此处的某个 ...
- Noip2007提高组总结
两道基础题,后两题比较麻烦,算法想出来后,还是一些细枝末节的问题,需要特别注意,感觉Noip的题目质量还是挺高的,每做一套,都感觉会有大大小小不同的收获,就要月考了,最后把07年的题目总结一下,算是这 ...
- Hibernate 知识提高
主键生成策略有: UUID,increment.Hilo.assigned:对数据库无依赖 identity:依赖Mysql或sql server,主键值不由hibernate维护 sequence: ...
- Eclipse 代码提示不显示的问题
在备份Android SDK和Eclipse的时候出了问题,然后只能重新下载,SDK下得我都要吐血了,超慢.然后,我发现Eclipse有了新版本的,于是就下载了个新版的,结果出了问题了.所有的Andr ...
- ArcGIS 10 许可配置
问题描述:在配置ArcGIS许可时,出现了许可检查通过,而无法启动arcmap的问题. 许可诊断结果如下: -------- Diagnostics -------- FLEXnet diagnost ...
- POJ Secret Milking Machine 【网络流+二分】
题意:各一个地图,两点之间有若干条路,要在节点1和节点n之间行走t次(就是问1到n的路径数至少为t,每一条路径不能有重复),问所有路径里面最长的部分(这个题目特别强调,不是路径长度和,是路径中相邻两点 ...