一、原型

　　我们在创建每一个函数的时候，都会有一个原型对象，即prototype.

　　

　　可以看出，函数拥有一个constructor的属性，这个属性指向了构造函数Drag,即函数本身，还有一个属性为__proto__,这个后面再说。

　　问题：现在有a和b两个属性，要求b可以继承a的所有属性？接下来我用两种继承方式实现。

二、原型链继承

　　如果要b继承a的属性。只要构造一个函数b，function b(){};  b.prototype=new a;

　　1.html代码

 1 <div id=”drag1″></div> 2 <div id=”drag2″></div> 

　　2.css代码　

*{margin: 0;padding: 0;}
#drag1{width: 100px;height: 100px;background: red;position: absolute;}
#drag2{width: 100px;height: 100px;background: black;position: absolute;left: 500px;}

  　3.js代码

 1 function Drag(){}
 2         Drag.prototype={
 3             constructor:Drag,
 4             init:function(id){
 5                 this.ele=document.getElementById(id);
 6                 var that=this;
 7                 this.ele.onmousedown=function(e){
 8                     var e=event||window.event;
 9                     that.disX=e.offsetX;
10                     that.disY=e.offsetY;
11                     document.onmousemove=function(e){
12                         var e=event||window.event;
13                         that.move(e);
14                         that.ele.onmouseup=function(){
15                             document.onmousemove=null;
16                         }
17                     }
18                 }
19             },
20             move:function(e){
21                 this.ele.style.left=e.clientX-this.disX+"px";
22                 this.ele.style.top=e.clientY-this.disY+"px";
23             }
24         }
25         
26         new Drag().init("drag1");
27         
28         function ExtendDrag(){};
29         ExtendDrag.prototype=new Drag();
30         new ExtendDrag().init("drag2")

 

三、class继承

html，css与上面一致

js代码：

 1 class Drag{
 2             constructor(id){
 3                 this.ele=document.getElementById(id);
 4                 this.init();
 5             };
 6             init(){
 7                 var that=this;
 8                 this.ele.onmousedown=function(e){
 9                     var e=event||window.event;
10                     that.disX=e.offsetX;
11                     that.disY=e.offsetY;
12                     document.onmousemove=function(e){
13                         var e=event||window.event;
14                         that.move(e);
15                     }
16                     that.ele.onmouseup=function(){
17                         document.onmousemove=null;
18                         that.ele.onmouseup=null;
19                     }
20                 }
21             };
22             move(e){
23                 this.ele.style.left=e.clientX-this.disX+"px";
24                 this.ele.style.top=e.clientY-this.disY+"px";
25             }
26         }
27         
28         new Drag("drag1");
29         
30         class ExtendsDrag extends Drag{
31             constructor(id){
32                 super(id);
33             }
34         }
35         
36         new ExtendsDrag("drag2")

 

　　

版权声明：本文为alongup原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/alongup/p/8629454.html