通過-拖拽-認(rèn)識對象繼承與對象冒充

在昨天通過“拖拽”了解了this在不同情況下的指向，今天在此基礎(chǔ)上我們來對對象的繼承與對象的冒充來進(jìn)行了解。
在昨天“拖拽”代碼的基礎(chǔ)上，用對象的繼承來對代碼進(jìn)行修改。
還是先創(chuàng)建一個構(gòu)造函數(shù)（Box(boxId)）,不同的是我們不在構(gòu)造函數(shù)中直接給出運(yùn)動和停止的行為。而是將他的行為加在他的原型中，這樣可以節(jié)省空間。

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();
            }
        }
    }

隨鼠標(biāo)移動的行為加在該物體中（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后的參數(shù)為函數(shù)的形參。（其實還可以用(Box.apply(this,[boxId])來代替，唯一不同的是在用apply時this后的參數(shù)必須為數(shù)組，數(shù)組里的每一項為函數(shù)的形參）。

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屬性（其實只是增加了一個顯示當(dāng)前坐標(biāo)的功能）

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，并且可以顯示當(dāng)前坐標(biāo)。

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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ECMAScript有兩種開發(fā)模式：1.函數(shù)式(過程化)，2.面向?qū)ο?OOP)。面向?qū)ο蟮恼Z言有一個標(biāo)志，那就是...
    dxxwdong閱讀 723評論 0贊 2
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持，譯者再次奉上一點點福利：阿里云產(chǎn)品券，享受所有官網(wǎng)優(yōu)惠，并抽取幸運(yùn)大...
    HetfieldJoe閱讀 3,078評論 4贊 14
  • 筆記1：e1.preventDefault();這是組織瀏覽器的默認(rèn)行為產(chǎn)生。2：function(e1) 函數(shù)里...
    King小志閱讀 272評論 1贊 1
  • 繼承是面向?qū)ο笾幸粋€比較核心的概念。其他正統(tǒng)面向?qū)ο笳Z言都會用兩種方式實現(xiàn)繼承：一個是接口實現(xiàn)，一個是繼承。而EC...
    dxxwdong閱讀 411評論 0贊 2
  • 當(dāng)你準(zhǔn)備應(yīng)聘一家公司的時候，簡歷往往是你展示個人印象最為直接的方式，通常在簡歷中有那么一項：你的愛好或者特長。記得...
    明天的夢想閱讀 514評論 0贊 1

友情鏈接更多精彩內(nèi)容