在昨天通過“拖拽”了解了this在不同情況下的指向，今天在此基礎上我們來對對象的繼承與對象的冒充來進行了解。
在昨天“拖拽”代碼的基礎上，用對象的繼承來對代碼進行修改。
還是先創建一個構造函數（Box(boxId)）,不同的是我們不在構造函數中直接給出運動和停止的行為。而是將他的行為加在他的原型中，這樣可以節省空間。
function Box(boxId){
if (boxId == undefined) {
return;
}
this.ele=document.getElementById(boxId);
var self=this;
this.ele.onmousedown=function(e){
e.preventDefault();
self.detaX = e.clientX - this.offsetLeft;
self.detaY = e.clientY - this.offsetTop;
self.move();
document.onmouseup=function(){
self.stop();
}
}
}
隨鼠標移動的行為加在該物體中（Box.prototype.move為在Box的原型中加入move屬性）。
Box.prototype.move=function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "PX"
self.ele.style.top = (e.clientY - self.detaY) + "PX"
}
}
停止移動的行為加在該物體中（Box.prototype.stop為在Box的原型中加入stop屬性）。
(Box.call(this,boxId))是繼承Box的屬性,this后的參數為函數的形參。（其實還可以用(Box.apply(this,[boxId])來代替，唯一不同的是在用apply時this后的參數必須為數組，數組里的每一項為函數的形參）。
Box.prototype.stop=function(){
document.onmousemove=null;
}
function Box2(boxId){
Box.call(this,boxId);
}
這樣我們就建立了一個可以拖拽的物體box1。
var box1=new Box("box1");
通過對象的繼承讓Box2繼承了Box的屬性與行為。（Box.call(this,boxId);）讓Box2繼承了Box的屬性，（Box2.prototype=new Box()）讓Box2繼承了Box的行為/方法。
function Box2(boxId){
Box.call(this,boxId);
}
Box2.prototype=new Box();
修改了Box2原型中的move屬性（其實只是增加了一個顯示當前坐標的功能）
Box2.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "px";
self.ele.style.top = (e.clientY - self.detaY) + "px";
self.ele.innerHTML=(e.clientX - self.detaX)+","+(e.clientY - self.detaY)
}
}
這樣我們就建立了一個可以拖拽的物體box2，并且可以顯示當前坐標。
var box2=new Box2("box2");
通過對象的繼承讓Box3繼承了Box的屬性與行為。（Box.call(this,boxId);）讓Box3繼承了Box的屬性，（Box3.prototype=new Box()）讓Box3繼承了Box的行為/方法。
function Box3(boxId){
Box.call(this,boxId)
}
Box3.prototype = new Box();
修改了Box3原型中的move屬性（看著很多的判斷語句其實只是讓其在寬為1100px高為600px的空間中拖拽）。
Box3.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
if((e.clientX - self.detaX)>=0&&(e.clientX - self.detaX)<=1000){
self.ele.style.left = (e.clientX - self.detaX) + "px";
}else if((e.clientX - self.detaX)<0){
self.ele.style.left = 0 + "px";
}else{
self.ele.style.left = 1000 + "px";
}
if((e.clientY - self.detaY)>=0&&(e.clientY - self.detaY)<=500){
self.ele.style.top = (e.clientY - self.detaY) + "px";
}else if((e.clientY - self.detaY)<0){
self.ele.style.top = 0 + "px";
}else{
self.ele.style.top = 500 + "px";
}
}
}
這樣我們就建立了一個可以拖拽的物體box3，并且只能在寬為1100px高為600px的空間中拖拽。
var box3=new Box3("box3");
附上完整代碼！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background:red;
position:absolute;
}
#box1{
background:green;
}
#box2{
background:yellow;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<script>
function Box(boxId){
if (boxId == undefined) {
return;
}
this.ele=document.getElementById(boxId);
var self=this;
this.ele.onmousedown=function(e){
e.preventDefault();
self.detaX = e.clientX - this.offsetLeft;
self.detaY = e.clientY - this.offsetTop;
self.move();
document.onmouseup=function(){
self.stop();
}
}
}
Box.prototype.move=function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "PX"
self.ele.style.top = (e.clientY - self.detaY) + "PX"
}
}
Box.prototype.stop=function(){
document.onmousemove=null;
}
function Box2(boxId){
Box.call(this,boxId);
}
Box2.prototype=new Box();
Box2.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
self.ele.style.left = (e.clientX - self.detaX) + "px";
self.ele.style.top = (e.clientY - self.detaY) + "px";
self.ele.innerHTML=(e.clientX - self.detaX)+","+(e.clientY - self.detaY)
}
}
function Box3(boxId){
Box.call(this,boxId)
}
Box3.prototype = new Box();
Box3.prototype.move = function(){
var self=this;
document.onmousemove=function(e){
if((e.clientX - self.detaX)>=0&&(e.clientX - self.detaX)<=1000){
self.ele.style.left = (e.clientX - self.detaX) + "px";
}else if((e.clientX - self.detaX)<0){
self.ele.style.left = 0 + "px";
}else{
self.ele.style.left = 1000 + "px";
}
if((e.clientY - self.detaY)>=0&&(e.clientY - self.detaY)<=500){
self.ele.style.top = (e.clientY - self.detaY) + "px";
}else if((e.clientY - self.detaY)<0){
self.ele.style.top = 0 + "px";
}else{
self.ele.style.top = 500 + "px";
}
}
}
var box1=new Box("box1");
var box2=new Box2("box2");
var box3=new Box3("box3");
</script>
</body>
</html>
