下面是自己写的一个关于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. 【Effective Java】4、覆盖equals时请遵守通用约定

    package cn.xf.cp.ch02.item8.transitivity; public class Point { private final int x; private final in ...

  2. 正态QQ图的原理

    code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && docu ...

  3. memcache与memcached扩展的区别

    一.服务端 之前理解错误了.服务端只有一个memcache,一般把服务端称作memcached(带d),是因为守护进程的名称就是叫做memcached(一个这样的执行程序文件). 编写的语言:c语言 ...

  4. Erlang进程间消息接收超时设定

        Erlang消息接收函数,一般都会设计成尾递归调用自己的模式.但是这样的模式,如果没有消息则会无限的等待下去,所以为了不无限等待,这里可以加个超时设定,例如: flush() -> re ...

  5. Vue混合

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson13 一 定位 混合以一种灵活的方式为组件提供分布复用功能.混合对象 ...

  6. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  7. Ubuntu下修改system.img 解包system.img、打包system.img

    一.准备工作:解压解打包工具,得到三个文件:make_ext4fs.mkuserimg.sh.simg2img,把它们跟要修改的 .img.ext4(或.img)文件放置到同一个目录下 二.转换源文件 ...

  8. Lucene实战构建索引

    搭建lucene的步骤这里就不详细介绍了,无外乎就是下载相关jar包,在eclipse中新建java工程,引入相关的jar包即可 本文主要在没有剖析lucene的源码之前实战一下,通过实战来促进研究 ...

  9. IOS真机测试（用证书进行真机测试）

    真机测试需要准备 1.证书 2.Iphone或者Ipad 3.到developer.apple.com注册开发者账号(不用money的) ------------------------------- ...

  10. ASCII

    0. American Standard Code of Information Interchange 美国信息交换标准码, 即ASCII, 定义表如下: Bin(二进制) Oct(八进制) Dec ...