下面是自己写的一个关于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. PHP学习笔记：删除与销毁session

    删除某个session值可以使用PHP的unset函数,删除后就会从全局变量$_SESSION中去除,无法访问. session_start(); $_SESSION['name'] = 'jobs' ...

  2. ssh 客户端远程vi文本文件中文乱码（亲测）

    由于是生产环境,且非笔者控制,为了避免影响系统全局,仅对本session有效 export LANG="zh_CN.UTF-8"export LANG="zh_CN.GB ...

  3. C++ 面向对象的三个特点--继承与封装（二）

    顺着上一篇的内容,我们继续来了解继承的基本知识. 派生类的构造函数和析构函数 派生类继承了基类的成员,但是不能继承基类的构造函数和析构函数,首先,我们了解构造函数和析构函数的执行顺序是当我们创建一个派 ...

  4. 删除单链表倒数第n个节点

    基本问题 如何删除单链表中的倒数第n个节点? 常规解法 先遍历一遍单链表,计算出单链表的长度,然后,从单链表头部删除指定的节点. 代码实现 /** * * Description: 删除单链表倒数第n ...

  5. [Xamarin.Android] 发布NuGet套件

    [Xamarin.Android] 发布NuGet套件 前言 在Xamarin中,可以将自己开发的项目包装成为NuGet套件发布至NuGet Server,来提供其他开发人员使用.本篇介绍如何封装并发 ...

  6. ASP.NET MVC中将控制器分离到类库的实现

    前言 在ASP.NET MVC的开发中,我们创建完项目之后,ASP.NET MVC是已Model-Controller-View的形式存在的,在创建项目自动生成的内容上Model我们很容易分离成类库, ...

  7. FEE Development Essentials

    FEE Development Essentials JS Basic function call() and apply() func1.bind(thisObj,arg1...argn) Cust ...

  8. win7 下配置Openssl

    最近刚刚装了openssl,遇到了很多问题,于是记录了下来: 我的PC环境是:系统win7,32位,Microsoft Visual Studio 2010: 下面开始安装: 1.安装前的准备:首先下 ...

  9. Swift学习--常量.变量.数据类型的使用(一)

    一.Swift中的常量和变量 /* Swift 中定义常量和变量用let/var let 代表定义一个常量 var 代表定义一个变量 Swift 中代表定义常量和变量不需要写数据类型,编译器辉根据我们 ...

  10. iOS开发之网络编程--使用NSURLConnection实现文件上传

    前言:使用NSURLConnection实现文件上传有点繁琐.    本文并没有介绍使用第三方框架上传文件. 正文: 这里先提供用于编码测试的接口:http://120.25.226.186:3281 ...