下面是自己写的一个关于js的拖拽的原型声明：代码如下

需要注意的问题包括:

1.this的指向到底是指向谁--弄清楚所指的对象

2.call()方法的使用

3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别？

比如：for(var i in Drag.prototype)
{
    LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变，其父级并不会受到影响
}

LimitDrag.prototype=Drag.prototype；---------直接将原型赋给子级，会导致当子级发生改变时，其父级也会随之而改变。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽--面向对象</title>
<script>
window.onload=function()
{
    new Drag('div1');
    new LimitDrag('div2');
}
function  Drag(id)
{
     var _this=this;//这个this表示p1
     this.disx=0;
     this.disy=0;
     this.oDiv=document.getElementById(id);
     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.onmousemove=null;
         document.onmouseup=null;
};
//继承Drag的所有属性
function LimitDrag(id)
{
        Drag.call(this,id);//这个this指LimitDrag new的对象
}
//得到Drag的方法,遍历其原型
for(var i in Drag.prototype)
{
    LimitDrag.prototype[i]=Drag.prototype[i];
}
//改变Drag的fnMove的方法
LimitDrag.prototype.fnMove=function(ev)
{
    var oEvent=ev||event;
    var l=oEvent.clientX-this.disx;
    var t=oEvent.clientY-this.disy;
    if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
    {
        l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }
    else if(l<0)
    {
        l=0;
    }
     if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
    {
        t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
    }
    else if(t<0)
    {
        t=0;
    }
     this.oDiv.style.left=l+'px';
     this.oDiv.style.top=t+'px';
}
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>

JavaScript 中的原型声明和用法总结的更多相关文章

  1. 【JavaScript】Javascript中的函数声明和函数表达式

    Javascript有很多有趣的用法,在Google Code Search里能找到不少,举一个例子: <script> ~function() { alert("hello, ...

  2. javascript中的原型继承

    在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...

  3. JavaScript中的原型、原型链、原型模式

    今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...

  4. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  5. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  6. JavaScript中字符串分割函数split用法实例

    这篇文章主要介绍了JavaScript中字符串分割函数split用法,实例分析了javascript中split函数操作字符串的技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JavaSc ...

  7. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

  8. 前端知识体系：JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则

    理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...

  9. javascript中this的四种用法

    javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...

随机推荐

  1. 研究jdk关于TreeMap 红黑树算法实现

    因为TreeMap的实现方式是用红黑树这种数据结构进行存储的,所以呢我主要通过分析红黑树的实现在看待TreeMap,侧重点也在于如何实现红黑树,因为网上已经有非常都的关于红黑树的实现.我也看了些,但是 ...

  2. windows临界区

    临界区: 临界区是一种轻量级机制,在某一时间内只允许一个线程执行某个给定代码段.通常在多线程修改全局数据时会使用临界区.事件.信号量也用于多线程同步,但临界区与它们不同,并不总是执行向内核模式的切换, ...

  3. HTTP路由

    HTTP路由 HTTP路由(译者注:Play的路径映射机制)组件负责将HTTP请求交给对应的action(一个控制器Controller的公共静态方法)处理. 对于MVC框架来说,一个HTTP请求可以 ...

  4. ABAP常用函数集锦

    函数名 描述 SD_VBAP_READ_WITH_VBELN 根据销售订单读取表vbap中的信息EDIT_LINES 把READ_TEXT返回的LINES中的行按照TDFORMAT=“*”重新组织VI ...

  5. 扩展SharePoint链接字段

    默认SharePoint中的链接字段有很多限制,例如 输入文字的时候只能录入255个字符 链接显示的是文字 点击链接后只能在当前页面打开链接 - - - - - - -- - - - - - -   ...

  6. C语言接口与实现实例

    一个模块有两部分组成:接口和实现.接口指明模块要做什么,它声明了使用该模块的代码可用的标识符.类型和例程,实现指明模块是如何完成其接口声明的目标的,一个给定的模块通常只有一个接口,但是可能会有许多种实 ...

  7. IOS字典NSDictionary与NSMutableDictionary知识点

    字典中的元素是以键值对的形式存储的,键值对的键和值,都是任意的对象,但是键往往使用字符串,字典存储对象的地址没有顺序,字典的遍历分为:键的遍历和值的遍历,字典与数组的区别:数组讲究顺序,而字典可以快速 ...

  8. iOS设计模式之工厂方法模式

    工厂方法模式 基本理解 工厂方法模式:定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 简单工厂的最大优点就是工厂类中包含了必要的逻辑判断,根据客户端的选择 ...

  9. 【原】结构体包含CString类型成员变量出错的原理

    问题如下:我定义了如下的一个结构体: typedef struct{   CString csText;}MyStruct; 并有如下的程序段1:MyStruct * p=NULL;p=(MyStru ...

  10. iOS 通过二进制判断图片类型

    + (NSString *)typeForImageData:(NSData *)data { uint8_t c; [data getBytes:&c length:1]; switch ( ...