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 ...
随机推荐
- Mac搭建Java开发环境
参考博文: http://shupeng.org/2012/10/14/config-java-env-on-mac/ http://hdu104.com/23 注意事项: (Mac OS X - M ...
- InputStream和OutputStream 何时使用
原文引自:http://blog.csdn.net/fyxxq/article/details/7071978 记得刚学习程序流一章的时候,就是搞不清楚In和Out,不知道什么时候用in什么时候用ou ...
- [转] iOS多线程编程之Grand Central Dispatch(GCD)介绍和使用
介绍: Grand Central Dispatch 简称(GCD)是苹果公司开发的技术,以优化的应用程序支持多核心处理器和其他的对称多处理系统的系统.这建立在任务并行执行的线程池模式的基础上的.它首 ...
- 转: Nodejs概述
目录 简介 安装与更新 版本管理工具nvm 基本用法 REPL环境 异步操作 全局对象和全局变量 模块化结构 概述 核心模块 自定义模块 fs模块 Stream模式 http模块 实例:搭建一个HTT ...
- CPU卡
CPU卡芯片通俗地讲就是指芯片内含有一个微处理器,它的功能相当于一台微型计算机.人们经常使用的集成电路卡(IC卡)上的金属片就是CPU卡芯片.CPU卡可适用于金融.保险.交警.政府行业等多个领域,具有 ...
- QT全局热键(用nativeKeycode封装API,不跨平台)
在网上找了很长时间,大家都提到了一个QT全局热键库(qxtglobalshortcut),支持跨平台.在这篇文章中,我将只展示出windows平台下全局热键的设置. 这里提供的方法是在MyGlobal ...
- MFC模式对话框与非模式对话框 消息处理顺序
对话框有两种创建方式:DoModal和Creat. 其中DoModal创建的是模态的对话框,而Creat创建的是非模态的对话框下面总结下他们的不同. 对于模态的对话框,在该对话框被关闭前,用户将不能在 ...
- HDU 1568 Fibonacci
题解:首先,对于小于10000的斐波那契数,我们直接计算,当大于10000时,用公式,由于只要输出前四位,所以不用考虑浮点数的问题,算出其取log的结果: tmp=(log(sq5/5)+n*log( ...
- AlertDialog弹出时背景明暗程度调整
今天有个需求是把弹出AlertDialog时的变暗的背景调整得不要那么暗. 一开始懒惰就直接百度中文搜索,结果找到的代码试了几次都不行. 后来老老实实开google.stackoverflow搜索,搜 ...
- BZOJ 1739: [Usaco2005 mar]Space Elevator 太空电梯
题目 1739: [Usaco2005 mar]Space Elevator 太空电梯 Time Limit: 5 Sec Memory Limit: 64 MB Description The c ...