本文目錄一覽：
JS 的實例和對象的區別
關於js中實例和對象的解釋如下： 比如定義persion如下： var person = new Object(); var person = {}; JS 是基於原型的面向對象語言, 所有數據都可以當作對象處理，所以 person 是對象, 可以把它當作是 Object 的實例. 當然, 一切都是對象。
JS 面向對象
為了能夠清楚的解釋這一切，我先從對象講起。從其他面向對象語言（如Java）而來的人可能認為在JS里的對象也是由類來實例化出來的，並且是由屬性和方法組成的。
實際上在JS里並不是如你所想（我開始是這麼想的）那樣，對象或直接稱為object，實際上只是一些映射對的集合，像Map，字典等概念。JS里有大概7種類型（加上Symbol），數字、字元串、null、undefined、布爾、Symbol、對象。除對象以外的其他類型屬於原始類型，就是說它們比較單純，包含的東西比較少，基本上就是字面量所表示的那些（像C語言中的一些類型，就是占那麼多空間，沒有其他的東西）。object基本上是一些鍵值對的集合，屬於引用類型，即是有一個名字去指向它來供別人使用的，就好像比較重的東西你拿不動，而只是拿了張記錄東西所在地的紙條。所以當A對象里嵌套了B對象，僅表示A裡面有一個引用指向了B，並不是真正把B包含在A裡面，雖然看起來是這樣（尤其是從對象的字面量上來看），所以才會有所謂的深拷貝與淺拷貝。
有句話叫「JavaScript里一切皆對象」，是因為在很多情況下原始類型會被自動的轉為對象，而函數實際上也是對象，這樣這句話看起來就很有道理了。
說明對象的本質是為了正確地認識對象，因為這關係到後面的理解。
JS基於面向對象實現的拖拽庫實例
本文實例講述了JS基於面向對象實現的拖拽庫。分享給大家供大家參考。具體如下：
這是一個面向對象的JS拖拽庫，可設置水平鎖定、垂直鎖定、鎖定位置、鎖定範圍等，設定這些範圍後，只能在設定的模式下拖動，我覺得這是個挺不錯的拖拽實例。
運行效果截圖如下：
在線演示地址如下：
具體代碼如下：
!DOCTYPE
html
PUBLIC
“-//W3C//DTD
XHTML
1.0
Transitional//EN”
“”
html
xmlns=””
head
meta
http-equiv=”Content-Type”
content=”text/html;
charset=utf-8″
/
title拖拽庫/title
style
type=”text/css”
div,h2,p{margin:0;padding:0;}
body{font:14px/1.5
arial;}
#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px
solid
#f60;}
#box
.title{height:25px;background:#f60;}
#tool{margin-bottom:10px;}
/style
script
type=”text/javascript”
function
Drag()
{
//初始化
this.initialize.apply(this,
arguments)
}
Drag.prototype
=
{
//初始化
initialize
:
function
(drag,
options)
{
this.drag
=
this.$(drag);
this._x
=
this._y
=
0;
this._moveDrag
=
this.bind(this,
this.moveDrag);
this._stopDrag
=
this.bind(this,
this.stopDrag);
this.setOptions(options);
this.handle
=
this.$(this.options.handle);
this.maxContainer
=
this.$(this.options.maxContainer);
this.maxTop
=
Math.max(this.maxContainer.clientHeight,
this.maxContainer.scrollHeight)
–
this.drag.offsetHeight;
this.maxLeft
=
Math.max(this.maxContainer.clientWidth,
this.maxContainer.scrollWidth)
–
this.drag.offsetWidth;
this.limit
=
this.options.limit;
this.lockX
=
this.options.lockX;
this.lockY
=
this.options.lockY;
this.lock
=
this.options.lock;
this.onStart
=
this.options.onStart;
this.onMove
=
this.options.onMove;
this.onStop
=
this.options.onStop;
this.handle.style.cursor
=
“move”;
this.changeLayout();
this.addHandler(this.handle,
“mousedown”,
this.bind(this,
this.startDrag))
},
changeLayout
:
function
()
{
this.drag.style.top
=
this.drag.offsetTop
+
“px”;
this.drag.style.left
=
this.drag.offsetLeft
+
“px”;
this.drag.style.position
=
“absolute”;
this.drag.style.margin
=
“0”
},
startDrag
:
function
(event)
{
var
event
=
event
||
window.event;
this._x
=
event.clientX
–
this.drag.offsetLeft;
this._y
=
event.clientY
–
this.drag.offsetTop;
this.addHandler(document,
“mousemove”,
this._moveDrag);
this.addHandler(document,
“mouseup”,
this._stopDrag);
event.preventDefault
event.preventDefault();
this.handle.setCapture
this.handle.setCapture();
this.onStart()
},
moveDrag
:
function
(event)
{
var
event
=
event
||
window.event;
var
iTop
=
event.clientY
–
this._y;
var
iLeft
=
event.clientX
–
this._x;
if
(this.lock)
return;
this.limit
(iTop
(iTop
=
0),
iLeft
(iLeft
=
0),
iTop
this.maxTop
(iTop
=
this.maxTop),
iLeft
this.maxLeft
(iLeft
=
this.maxLeft));
this.lockY
||
(this.drag.style.top
=
iTop
+
“px”);
this.lockX
||
(this.drag.style.left
=
iLeft
+
“px”);
event.preventDefault
event.preventDefault();
this.onMove()
},
stopDrag
:
function
()
{
this.removeHandler(document,
“mousemove”,
this._moveDrag);
this.removeHandler(document,
“mouseup”,
this._stopDrag);
this.handle.releaseCapture
this.handle.releaseCapture();
this.onStop()
},
//參數設置
setOptions
:
function
(options)
{
this.options
=
{
handle:
this.drag,
//事件對象
limit:
true,
//鎖定範圍
lock:
false,
//鎖定位置
lockX:
false,
//鎖定水平位置
lockY:
false,
//鎖定垂直位置
maxContainer:
document.documentElement
||
document.body,
//指定限制容器
onStart:
function
()
{},
//開始時回調函數
onMove:
function
()
{},
//拖拽時回調函數
onStop:
function
()
{}
//停止時回調函數
};
for
(var
p
in
options)
this.options[p]
=
options[p]
},
//獲取id
$
:
function
(id)
{
return
typeof
id
===
“string”
?
document.getElementById(id)
:
id
},
//添加綁定事件
addHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.addEventListener
?
oElement.addEventListener(sEventType,
fnHandler,
false)
:
oElement.attachEvent(“on”
+
sEventType,
fnHandler)
},
//刪除綁定事件
removeHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.removeEventListener
?
oElement.removeEventListener(sEventType,
fnHandler,
false)
:
oElement.detachEvent(“on”
+
sEventType,
fnHandler)
},
//綁定事件到對象
bind
:
function
(object,
fnHandler)
{
return
function
()
{
return
fnHandler.apply(object,
arguments)
}
}
};
//應用
window.onload
=
function
()
{
var
oBox
=
document.getElementById(“box”);
var
oTitle
=
oBox.getElementsByTagName(“h2”)[0];
var
oSpan
=
document.getElementsByTagName(“span”)[0];
var
oDrag
=
new
Drag(oBox,
{handle:oTitle,
limit:false});
var
aInput
=
document.getElementsByTagName(“input”);
//鎖定範圍介面
aInput[0].onclick
=
function
()
{
oDrag.limit
=
!oDrag.limit;
this.value
=
oDrag.limit
?
“取消鎖定範圍”
:
“鎖定範圍”
};
//水平鎖定介面
aInput[1].onclick
=
function
()
{
oDrag.lockX
=
!oDrag.lockX;
this.value
=
oDrag.lockX
?
“取消水平鎖定”
:
“水平鎖定”
};
//垂直鎖定介面
aInput[2].onclick
=
function
()
{
oDrag.lockY
=
!oDrag.lockY;
this.value
=
oDrag.lockY
?
“取消垂直鎖定”
:
“垂直鎖定”
};
//鎖定位置介面
aInput[3].onclick
=
function
()
{
oDrag.lock
=
!oDrag.lock;
this.value
=
oDrag.lock
?
“取消鎖定位置”
:
“鎖定位置”
};
//開始拖拽時方法
oDrag.onStart
=
function
()
{
oSpan.innerHTML
=
“開始拖拽”
};
//開始拖拽時方法
oDrag.onMove
=
function
()
{
oSpan.innerHTML
=
“left:”
+
this.drag.offsetLeft
+
“,
top:”
+
this.drag.offsetTop
};
//開始拖拽時方法
oDrag.onStop
=
function
()
{
oSpan.innerHTML
=
“結束拖拽”
};
};
/script
/head
body
div
id=”tool”
input
type=”button”
value=”鎖定範圍”
/
input
type=”button”
value=”水平鎖定”
/
input
type=”button”
value=”垂直鎖定”
/
input
type=”button”
value=”鎖定位置”
/
/div
p拖放狀態：span未開始/span/p
div
id=”box”
h2
class=”title”/h2
/div
/body
/html
希望本文所述對大家的JavaScript程序設計有所幫助。
js面向對象的幾種方式
JavaScript中對象的創建有以下幾種方式：
（1）使用內置對象
（2）使用JSON符號
（3）自定義對象構造
一、使用內置對象
JavaScript可用的內置對象可分為兩種：
1，JavaScript語言原生對象（語言級對象），如String、Object、Function等；
2，JavaScript運行期的宿主對象（環境宿主級對象），如window、document、body等。
我們所說的使用內置對象，是指通過JavaScript語言原生對象的構造方法，實例化出一個新的對象。如：
複製代碼 代碼如下:
var str = new String(“實例初始化String”);
var str1 = “直接賦值的String”;
var func = new Function(“x”,”alert(x)”);//示例初始化func
var o = new Object();//示例初始化一個Object
二、使用JSON符號
（i）何謂JSON ?
JSON （JavaScript Object
Notation）即JavaScript對象命名，是一種輕量級的數據交換格式，易於閱讀和編寫，同時也易於及其解析和生成。它基於
《JavaScript Programming Language, Standard ECMA-262 3rd Edition –
December 1999》的一個子集。JSON是完全獨立於語言的文本格式，因此成為數據交換的理想格式。
JSON作為
JavaScript的一個自己，同時ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、
ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的語言都提供支持，使得JSON成為Ajax開發的
首選方案。
JSON有兩種構建方式，一種是採用簡單的「鍵/值對」的集合，在不同的語言中被理解為對象、記錄、結構、字典、哈希表、有鍵列表，或者關聯數組等，另一種採用有序的值列表，大部分語言把它理解為數組。
常用的創建方式是第一種，即採用「鍵/值對」集合的形式。在這種形式下，一個對象以「{」（左括弧）開始，「}」（右括弧）結束。每個「名稱」後跟一個「:」（冒號），「
『鍵/值’ 對」之間使用「,」（逗號）分隔。
JSON具有以下特點：（1）簡單格式化的數據交換；（2）易於人們的讀寫習慣；（3）易於機器的分析和運行。
在JavaScript中，JSON被理解為對象。通過字元串形式的JSON，數據可以很方便地解析成JavaScript獨享，並進行數據的讀取傳遞。通過JSON，在一定程度上客服了JavaScript對象無法作為參數系列化傳遞的問題。
1，簡單的JSON
{name:”劉德華”,age:”25″,sex:”男”}
2，JSON值的類型
JSON的值可以是簡單的數據類型，例如數字、浮點、字元等，也可以是數組及對象。例如以數組作為member鍵值的JSON：
{member:[{name:”劉德華”},{name:”郭富城”},{name:”張學友”},{name:”黎明”}]}
{
book:[{name:”三國演義”},{name:”西遊記”},{name:”水滸傳”},{name:”紅樓夢”}],
author:[{name:”羅貫中”},{name:”吳承恩”},{name:”施耐安”,{name:”曹雪芹”}}]
}
3，在JavaScript中使用JSON
JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或者工具包，JavaScript默認將JSON當做一個對象處理。
將對象傳遞給一個變數，例如：
複製代碼 代碼如下:
var somebooks = {
book:[{name:”三國演義”},{name:”西遊記”},{name:”水滸傳”},{name:”紅樓夢”}],
author:[{name:”羅貫中”},{name:”吳承恩”},{name:”施耐安”,{name:”曹雪芹”}}]
}
JSON的每個「鍵」相當於對象的屬性，例如訪問book中的第一個條目，在JavaScript中，就可以簡單地使用「somebooks.book[0].name」來獲取「三國演義」這個值。
我們不但可以將一個JSON字元串轉化為對象，反過來將一個對象「編譯」為一個JSON字元串，以方便JavaScript中的對象的傳輸。例如：
複製代碼 代碼如下:
var Animals = new Object();
Animals.name = “dog”;
Animals.sex = “Male”;
Animals.age = “2”;
Animals對象無法被序列化傳輸，將Animals對象轉化為JSON字元串，也就是「{name:”dog”,sex:”Male”,age:”2″}」。這樣，把該JSON字元串作為HTTP請求的一個參數傳遞，從而達到序列化傳輸Animals對象的目的。
（ii）JSON通過字元串形式來表達JavaScript的對象。如：
複製代碼 代碼如下:
var myObject = {nickname:”my girlfried”,name:”big
pig”};
JSON
實際上充當了一種在JavaScript對象和字元串之間實現相互轉換的協議。由於JSON的「外表」可以看成但村的字元串，因此JSON在
JavaScript的對象傳輸方面可以起到一定的作用。例如把對象strObject轉換成字元串後進行傳輸，在達到目的地後通過eval方法將其還原
成對象：
複製代碼 代碼如下:
function test (o)
{
alert (o.name)
}
var strObject = ‘{nickname:”my girlfriend”,name:”big pig”}’;
test (eval_r(“(” + strObject + “)”));
三、自定義對象構造
創建高級對象構造有兩種方式：使用「this」關鍵字構造、使用原型prototype構造。如：
複製代碼 代碼如下:
//使用this關鍵字定義構造的上下文屬性
function Girl()
{
this.name = “big pig”;
this.age = 20;
this.standing;
this.bust;
this.waist;
this.hip;
}
//使用prototype
function Girl(){}
Girl.prototype.name = “big pig”;
Girl.prototype.age = 20;
Girl.prototype.standing;
Girl.prototype.bust;
Girl.prototype.waist;
Girl.prototype.hip;
alert(new Girl().name);
上例中的兩種定義在本質上沒有區別，都是定義「Girl」對象的屬性信息。「this」與「prototype」的區別主要在於屬性訪問的順序。如：
複製代碼 代碼如下:
function Test()
{
this.text = function()
{
alert(“defined by this”);
}
}
Test.prototype.test = function()
{
alert(“defined by prototype”);
}
var _o = new Test();
_o.test();//輸出「defined by this」
當訪問對象的屬性或者方法是，將按照搜索原型鏈prototype
chain的規則進行。首先查找自身的靜態屬性、方法，繼而查找構造上下文的可訪問屬性、方法，最後查找構造的原型鏈。
「this」
與「prototype」定義的另一個不同點是屬性的佔用空間不同。使用「this」關鍵字，示例初始化時為每個實例開闢構造方法所包含的所有屬性、方法
所需的空間，而使用「prototype」定義，由於「prototype」實際上是指向父級的一種引用，僅僅是個數據的副本，因此在初始化及存儲上都比
「this」節約資源。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/295779.html
微信掃一掃 
支付寶掃一掃 