JavaScript 中的原型声明和用法总结

时间：2022-09-10 12:25:28

下面是自己写的一个关于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中的原型继承&lpar;2&rpar;

    两年前在我学习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基础教程-输出Hello World

    <!DOCTYPE html> <!--!文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明, 它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(D ...

  2. React 源码解读参考，理解原理。

    Rubix - ReactJS Powered Admin Template 文档:   http://rubix-docs.sketchpixy.com/ ===================== ...

  3. Unity3d NavMesh获得地面高度

    UnityPro内置的NavMesh有几个API很有用 NavMesh.SamplePosition 根据给的点进行采样,可传入最大距离,返回true说明采样到了点,否则采样失败(可以用来获得地形高度 ...

  4. xml之基础了解

    1.简介 1>什么XML语言(eXtensible Markup Language) 可扩展标记语言XML是SGML的子集,其目标是允许普通的SGML在Web上以目前HTML的方式被服务.接受和 ...

  5. tomcat 解析（一）-文件解析

    做web项目,最常用的服务器就是Apache的tomcat.虽然一直在用tomcat,但都是仅限在使用的阶段,一直没有深入学习过.想深入学习tomcat,首推的肯定是官网:http://tomcat. ...

  6. zoj 3777 Problem Arrangement

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5264 题意:给出n道题目以及每一道题目不同时间做的兴趣值,让你求出所有做题顺序 ...

  7. objective-c之各种数值

    各种数值 NSArray和NSDictionary都只能存储对象,不能存储任何基本类型的数据,如int,float,struct.因此我们可以用对象来封装基本的数值. NSNumber Cocoa提供 ...

  8. cs231n spring 2017 lecture6 Training Neural Networks I 听课笔记

    1. 激活函数: 1)Sigmoid,σ(x)=1/(1+e-x).把输出压缩在(0,1)之间.几个问题:(a)x比较大或者比较小(比如10,-10),sigmoid的曲线很平缓,导数为0,在用链式法 ...

  9. Unity3D打包 将发布的exe文件打包成一个Windows安装文件（自解压文件）

    Unity打包Standalone时 会出现一个exe文件和一个data文件夹 可是我们平常见过的软件 基本没有这种像这种结构的 一般都是一个安装文件,然后点击安装,选择路径,生成快捷方式- 本篇博客 ...

  10. SpringCloud的微服务网关：zuul（实践）

    Zuul的主要功能是路由和过滤器.路由功能是微服务的一部分,比如/api/user映射到user服务,/api/shop映射到shop服务.zuul实现了负载均衡. zuul有以下功能: Authen ...

相关文章