1.js 支持面向对象编程，但只是基于面向对象，不使用类或者接口。
2.演变 工厂模式-------》构造函数模式----------》原型模式

工厂模式的缺点：
　　①函数内部new ,不太符合 new 函数这种写法     ----解决方法 构造函数
　　②资源浪费，工厂模式中函数中的方法，每一个新函数都会有自己的一个函数------解决方法 原型模式

3.构造函数的缺点：每个成员都无法得到复用，包括函数。
原型链的缺点：对象实例共享所有继承的属性和方法。

因此不适合单独使用，解决办法在子类构造函数内部调用超类的构造函数，就做到了每个实例都有自己的属性

5.最好的办法寄生组合继承：使用原型链继承共享的属性和方法，而通过借用构造函数继承实例的属性。
　　
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script>

    function Person(name,sex){

        this.name = name;

        this.sex= sex;

    }

    Person.prototype.sayName = function(){

        alert(this.name);

    };

    Person.prototype.saySex = function(){

        alert(this.sex);

    };

    function Worker(name,sex,job){

        Person.call(this,name,sex); //调用构造函数

        this.job = job;

    }

    /*Worker.prototype = Person.prototype; //引用的写法，这样写改变子类的方法会把父类的方法也改变了*/

    for(var attr in Person.prototype){ //这样写就不会了

        Worker.prototype[attr] = Person.prototype[attr];

    }

    Worker.prototype.sayJob = function(){

        alert(this.job);

    };

    Worker.prototype.sayName = function(){

        alert('123');

    };

    window.onload = function(){

        var person1 = new Person('ww','女');

        person1.sayName();

        var instance = new Worker('leo','男','soft');

        instance.sayName();

        instance.sayJob();

    };

</script>

</head>

<body>

</body>

</html>


// JavaScript Document

    /*构造函数*/

    function Drag(id){

        this.disX = 0;

        this.disY = 0;

        this.oDiv = document.getElementsByTagName(id)[0];

        var _this = this;

        this.oDiv.onmousedown = function(ev){

            _this.fnDown(ev);

            return false;

        };

    }

    Drag.prototype.fnDown = function(ev){

        var oEvent = ev || event;

        this.disX = oEvent.clientX - this.oDiv.offsetLeft;

        this.disY = oEvent.clientY - this.oDiv.offsetTop;

        var _this = this;

        document.onmouseover = function(ev){

            _this.fnMove(ev);

        };

        document.onmouseup = function(){

            _this.fnUp(ev);

        };

    }

    Drag.prototype.fnMove = function(ev){

        var ev = ev || event;

        this.oDiv.style.left = ev.clientX - this.disX+'px';

        this.oDiv.style.top = ev.clientY - this.disY+'px';

   }

   Drag.prototype.fnUp = function(){

        document.onmouseover = document.onmouseup = null;

   }






// JavaScript Document

function LimateDrag(id){

    Drag.call(this,id); //继承属性

}

//继承方法

for(var i in Drag.prototype){

    LimateDrag.prototype[i] = Drag.prototype[i]

}

LimateDrag.prototype.fnMove = function(ev){

        var ev = ev || event;

        var l = ev.clientX - this.disX;

        var t = ev.clientY - this.disY;

        if(l < 0){

            l = 0;

        }else if(l >= document.documentElement.clientWidth-this.oDiv.offsetWidth ){

            l = document.documentElement.clientWidth-this.oDiv.offsetWidth;

        }

        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';

}






<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    div{width:100px;height:100px;background:red;position:absolute;left:0;top:0;}

</style>

<script src ='Drag.js'></script>

<script src ='LimateDrag.js'></script>

<script>

    window.onload = function(){

        new LimateDrag('div');

    };

</script>

</head>

<body>

<div></div>

</body>

</html>


												


											
js 拖拽实现面向对象的更多相关文章
	

    
								
  1. 【转】C#.net拖拽实现获得文件路径
		
    C#.net拖拽实现获得文件路径 作者Attilax ,  EMAIL:1466519819@qq.com 思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), ...
    
		
    2. 
						
  2. 【WPF】一些拖拽实现方法的总结（Window，UserControl）
		
    原文:[WPF]一些拖拽实现方法的总结(Window,UserControl) 原文地址 https://www.cnblogs.com/younShieh/p/10811456.html 前文 本文 ...
    
		
    3. 
						
  3. HTML5元素拖拽实现示例
		
    HTML5现在前端圈中,已然成为一个不那么新的技术词汇了,很多公司也把HTML5也当成了硬性的技能要求,但是很多前端恐怕都不了解HTML5的拖拽怎么实现吧. 看了下极客学院的视频,大概的了解了下思路. ...
    
		
    4. 
						
  4. HTML5 元素拖拽实现 及 jquery.event.drag插件
		
    如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
    
		
    5. 
						
  5. html5简单拖拽实现自动左右贴边+幸运大转盘
		
    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
    
		
    6. 
						
  6. C#.net拖拽实现获得文件路径
		
    思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),  在DragDrop事件中对“信息”进行解析.        窗体的AllowDrop属性必须设置成tru ...
    
		
    7. 
						
  7. Silverlight中的拖拽实现的图片上传
		
    原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...
    
		
    8. 
						
  8. selenium操作拖拽实现无效果的替代方案
		
    如果碰到这种情况,无论你是直接通过draganddrop()还是分步执行clickandhold(),dragtoelement(),或通过by_offset位移都无法实现元素拖拽.只能物理模拟了 w ...
    
		
    9. 
						
  9. C#winform拖拽实现获得文件路径
		
    1.关键知识点说明: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),在DragDrop事件中对“信息”进行解析.窗体的AllowDrop属性必须设置成true;且 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 转：Zabbix 监控sqlserver
			
    一:Zabbix监控sqlserver 方法一: 1.思路整理 1.在zabbix server上安装Freetds.unixODBC.unixODBC-devel使其能够访问SQL Server数据 ...
    
			
    2. 
						
  2. Jenkins 2 如何使用 PowerShell 以及自定 build fail (指定 exit code)
			
    Jenkins 除了用來做為 CI(持續性整合) 工具外,也可以與其他 plugin 配合達成其他目的(e.g.IIS restart.檔案壓縮備份-),今天就來看看可以怎麼與 PowerShell  ...
    
			
    3. 
						
  3. 押宝在Apple Watch的智能手表游戏玩得转吗？
			
    Watch的智能手表游戏玩得转吗?" title="押宝在Apple Watch的智能手表游戏玩得转吗?"> 如果你给法拉利跑车贴上金箔,会被认为是俗气.但若在Ap ...
    
			
    4. 
						
  4. 关于使用gitlab协同开发提交代码步骤
			
    记录使用gitlab协同开发时从自己的分支向master分支提交代码的步骤: 环境:安装了git和TortoiseGit(git的可视化工具) 1.首先切换到自己的分支(如果不在自己的分支) 2.gi ...
    
			
    5. 
						
  5. 二、Android XML数据解析
			
    XML,可扩展标记语言.可以用来存储数据,可以看做是一个小型的数据库,SharedPreference就是使用XML文件存储数据的,SQLite底层也是一个XML文件,而在网络应用方面,通常作为信息的 ...
    
			
    6. 
						
  6. js 网页运行原理
			
    当我们打开一个网页的时候,浏览器会首先创建一个窗口,这个窗口就是我所知道的window对象,也就是整个Javascript运行所依附的全局变量. 为了加载网页文档,当前窗口又需要创建一个Documen ...
    
			
    7. 
						
  7. JAVA中String类的比较
			
    首先给大家看一段代码 package javaapptest; public class JavaAppTest { public static void main(String[] args) {  ...
    
			
    8. 
						
  8. 红灯区：DevOps 建设的思考和实践
			
    点击关注"有赞coder" 获取更多技术干货哦- 作者:费解 团队:效能改进 背景 众所周知,在丰田精益生产中,核心观念包含对人的尊重.消除浪费.持续改善,只有这样,企业才能保持良 ...
    
			
    9. 
						
  9. 849. Dijkstra求最短路 I
			
    给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出1号点到n号点的最短距离,如果无法从1号点走到n号点,则输出-1. 输入格式 第一行包含整数n和m. 接下来m行每行包 ...
    
			
    10. 
						
  10. Python 零基础入门
			
    Python 零基础入门 1.1 Python介绍 Python 是一门优雅且健壮的面向对象解释型计算机程序编程语言,具有面向对象.可升级.可扩展.可移植 语法简洁清晰易学.易读写.易维护.健壮性.通 ...
    
			
    11.