### 使用繼承
- 限制范圍的拖拽類
- 構造函數的偽裝
- 屬性的繼承
- 原理
- `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';
}
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一個 JS 特效:鼠標提示框
- 網頁換膚和 if 判斷
- 函數傳參
- 循環 while 和 for
- 導航欄選項卡
- JS 簡易日歷
- JavaScript 基礎
- JavaScript 組成
- 變量類型
- 變量類型轉換
- 變量的作用域和閉包
- 命名規范
- 運算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函數返回值
- 函數傳參與行間樣式
- 數組基礎操作
- 定時器的使用
- 定時器的作用
- 數碼時鐘
- Date 對象其它方法
- 延時提示框
- 無縫滾動
- DOM基礎應用
- DOM 基礎
- DOM 節點
- 操作元素屬性
- DOM 元素靈活查找
- DOM 操作應用
- 創建、插入和刪除元素
- 文檔碎片
- DOM操作應用高級
- 表格標簽
- 表格應用
- 表單應用
- JS 運動基礎
- 運動基礎
- 運動框架及應用
- 緩沖運動
- 運動的停止條件
- JS 運動應用
- 多物體運動框架
- 任意值運動框架
- 仿 Flash 圖片展示
- JS 運動中級
- 鏈式運動框架
- 完美運動框架
- 運動框架總結
- 運動框架應用
- JS事件基礎
- Event 對象和事件
- 鼠標事件
- 鍵盤事件
- JS 事件中級
- 默認事件
- 拖拽
- JS 事件高級應用
- 事件綁定
- 高級拖拽
- 自定義滾動條
- Ajax 基礎
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中級
- 編寫 Ajax
- Ajax 數據
- JS 面對對象基礎
- 面對對象是什么
- JS 中的面對對象
- 第一個面對對象的程序
- 工廠方式
- 原型:Prototype
- 面對對象編程方式
- JS 面對對象實例
- 面對對象的選項卡
- JS 面對對象高級
- Json 方式的面向對象
- 拖拽和繼承
- 使用繼承
- 系統對象
- BOM 應用
- BOM 基礎
- 尺寸及坐標
- 常用方法和事件
- COOKIE 基礎與應用
- 什么是 cookie
- 使用 cookie
- JS 中的正則表達式
- 正則表達式基礎
- 字符串與正則配合
- 字符串
- 量詞
- 常用正則例子
- JS Template 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符