<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

*{
margin: 0;
padding: 0;
}

ul,li{
list-style: none
}

#div1{
width: 200px;
height: 300px;
position: absolute;
background: red;
}

#div2{
width: 200px;
height: 300px;
position: absolute;
background: green;

top: 300px;
}

#div3{
width: 200px;
height: 300px;
position: absolute;
background: yellow;

top: 600px;
}

</style>
</head>

<body>

<div id="div1"></div>
<div id="div2">ddd</div>
<div id="div3">yyyy</div>
<script>

function Drag (id) {
var _this = this;
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementById(id);
this.oDiv.onmousedown = function (ev) {
_this.fnDown(ev);
};
}

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.onmousemove = null;
document.onmouseup = null;
};

function LimitDrag (id) {
Drag.call(this,id);  //获得父类的属性  Drag.apply(this,arguments)  //这里arguments就代表传入的参数就不需要全部列出来了
}

//获取父类的方法

for(var i in Drag.prototype){
LimitDrag.prototype[i] = Drag.prototype[i];
}

<!--另外一种获取父类的方法-->

TabOver.prototype = Object.create(SwitchTab.prototype);
TabOver.prototype.constructor = TabOver;

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.offsetWdith;
}

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";
};

window.onload = function () {
new Drag('div1');
new Drag('div2');
new LimitDrag('div3');
};

// C语言没有面向对象的概念 javascript 基于面向对象 java php 具有面向对象的概念

// document.documentElement.clientHeight 网页可视区的宽度
// document.documentElement.clientWdith 网页可视区的高度

//想要继承父类的属性和方法。要做两件事情
//第一件:使用call继承父类属性
//第二件:使用循环将父类中的方法全部拷贝一份到子类中。这样做的目的是为了避免修改子类影响父类

</script>

</body>
</html>

详细可以浏览:http://blog.csdn.net/kkkkkxiaofei/article/details/46474069

javascript 如何继承父类的更多相关文章

  1. javascript中子类如何继承父类

    参考阮一峰的文章:http://javascript.ruanyifeng.com/oop/inheritance.html#toc4 function Shape() { this.x = 0; t ...

  2. JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习

    虽然经常说是做前端开发的,但常常使用的技术反而是JQuery比较多一点.在JavaScript的使用上相对而言少些.尤其是在创建对象使用原型链继承上面,在项目开发中很少用到.所以今天做个demo练习一 ...

  3. 【设计模式+原型理解】第三章：javascript五种继承父类方式

    [前言] 我们都知道,面向对象(类)的三大特征:封装.继承.多态 继承:子类继承父类的私有属性和公有方法 封装:把相同的代码写在一个函数中 多态: ->重载:JS严格意义上是没有重载,但可以通过 ...

  4. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  5. 详解Javascript的继承实现

    我最早掌握的在js中实现继承的方法是在w3school学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用 ...

  6. 详解Javascript的继承实现（二）

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  7. JavaScript简洁继承机制实现(不使用prototype和new)

    此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的JavaScript继承方法. 传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不 ...

  8. JavaScript 面向对象继承详解

    题记 由于js不像java那样是完全面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,一般都是基于原型链的方式: 一.继承初探 大多数JavaScript的实现用 __proto_ ...

  9. javascript实现继承的几种方式

    原型链方式实现继承 function SuperType(){ this.property = true; this.colors = ['red','blue','green']; } SuperT ...

随机推荐

  1. 为什么要使用Nginx？

    这里做了些基准测试表明nginx打败了其它的轻量级的web服务器和代理服务器,同样也赢了相对不是那么轻量级的产品. 有人说这些基准测试是不准确的,因为在这样那样的环境下,做的比较不一致.我倾向同意基准 ...

  2. bui上手体验

    在最近的项目中,接触到了bui这个后台管理框架 主页地址:http://builive.com/ 主页上也有一个后台管理的Demo:http://builive.com/apps/default/ma ...

  3. __device__ __global__ __host__

    __device__ 标记的函数从一个在器件中执行的函数呼叫,在器件中执行 __global__ 表示该函数从一个在主机中执行的函数呼叫,在器件中执行 __host__表示在主机中呼叫,在主机中执行的 ...

  4. SQL Profile 总结（一）

    一.前提概述 在介绍SQL Profile之前,不得不说的一个工具就是SQL Tuning Advisor:这个工具是从Oracle 10g開始引入,它的任务就是分析一个指定的SQL语句,并建议怎样使 ...

  5. Android ListView 滚动的N种方法

    Android 里面让ListView滚动有N种方法,这儿列举三种: 我的需求是通过按键让Listview滚动起来,当然这些按键不是通过Android标识接口传输过来的,所以不能通过监听按键事件来实现 ...

  6. 自定义控件（视图）2期笔记01：自定义控件之自定义View的步骤

    1. 根据Android Developers官网的介绍,自定义控件你需要以下的步骤: (1)创建View (2)处理View的布局 (3)绘制View (4)与用户进行交互 (5)优化已定义的Vie ...

  7. apache ab工具对网站进行压力测试

    Apache -- ab工具主要测试网站的(并发性能) 这个工具非常的强大. 基本语法 :   cmd>ab.exe –n 请求总次数  -c 并发数 请求页面的url     进入到ab.ex ...

  8. 【socket.io研究】2.小试牛刀

    1.建立个项目,也就是文件夹,这里使用testsocket 2.创建文件package.json,用于描述项目: { "name":"testsocket", ...

  9. 对于数据操作的SQL语句精粹(长期更新)

    --删除空格 Update [Table] Set [Column]=Replace([Column],' ','') --查出左右和右边带空格的数据 select RTRIM( LTRIM([Col ...

  10. FalseEasting 和 FalseNorthing

    FalseEasting (东伪偏移) 和FalseNorthing(北伪偏移) FalseEasting (东伪偏移) 投影平面中为避免横轴(经度方向)坐标出现负值,而所加的偏移量.我国规定将高斯- ...