使用繼承 · JavaScript學習記錄

### 使用繼承 - 限制范圍的拖拽類 - 構造函數的偽裝 - 屬性的繼承 - 原理 - `call` 的使用 ```js function A() { this.abc = 12; } A.rototype.show = { alert(this.abc); } function B() { A.call(this); // 用 call 繼承屬性，把B傳入A函數內 } // B.prototype = A.prototype; // 淺復制方法是引用，指向同一個內存空間 for (var i in A.prototype) { B.prototype[i] = A.ptoyotype[i]; // 深度復制就不會引用，直接復制內容 } var obj = new B(); alert(obj.abc); obj.show.call(); // call 一般省略 ``` - 原型鏈 - 方法的繼承 - 原理：**復制方法是引用，指向同一個內存空間** - 覆蓋原型的方法復制 - `for in` 深度復制就不會引用，直接復制內容 - 代碼：拖拽改寫為面對對象并繼承一個新的對象 ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>面對對象的拖拽</title> <link rel="stylesheet" href="../reset.css"> <style> #div1 { top: 100px; left: 100px; width: 200px; height: 200px; position: absolute; background-color: rgb(255, 0, 0); } #div2 { width: 200px; height: 200px; position: absolute; background-color: rgb(0, 255, 170) } </style> <script src="./lib/Drag.js"></script> <script src="./lib/LimitDrag.js"></script> <script> window.onload = function () { new Drag('div1'); new LimitDrag('div2'); } </script> </head> <body> <div id="div1">普通拖拽</div> <div id="div2">限制范圍的拖拽</div> </body> </html> ``` ```JS function Drag(id) { this.disX = ''; this.disY = ''; this.oDiv = document.getElementById(id); var _this = this; this.oDiv.onmousedown = function (ev) { _this.fnDown(ev); return false; }; } Drag.prototype.fnDown = function (ev) { var ev = event||ev; var _this = this; // 鼠標可視區位置 - div左邊距 = 鼠標在div內的位置 this.disX = ev.clientX - this.oDiv.offsetLeft; this.disY = ev.clientY - this.oDiv.offsetTop; console.log(this.disX,'可視區鼠標X：', ev.clientX, '鼠標Y：',ev.clientY); document.onmousemove = function (ev) { _this.mouseMove(ev); } document.onmouseup = function (ev) { _this.mouseUp(ev); } } Drag.prototype.mouseMove = function(ev) { // 不斷獲取Event 對象，坐標才會不斷更新 var ev = event||ev; // console.log('可視區鼠標X：', ev.clientX, '鼠標Y：',ev.clientY); // div位置 = 鼠標可視區新的位置 - 鼠標與div的距離 this.oDiv.style.left = ev.clientX - this.disX + 'px'; this.oDiv.style.top = ev.clientY - this.disY + 'px'; } Drag.prototype.mouseUp = function () { document.onmousemove = ''; document.onmouseup = ''; } ``` ```JS // 繼承屬性 function LimitDrag(id) { Drag.call(this, id); } // 繼承原型 for (var i in Drag.prototype) { LimitDrag.prototype[i] = Drag.prototype[i]; } LimitDrag.prototype.mouseMove = function(ev) { // 不斷獲取Event 對象，坐標才會不斷更新 var ev = event||ev; // console.log('可視區鼠標X：', ev.clientX, '鼠標Y：',ev.clientY); // div位置 = 鼠標可視區新的位置 - 鼠標與div的距離 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.top = t + 'px'; this.oDiv.style.left = l + 'px'; } ```