說到物件，就一定要稍微提到物件導向的基本概念，物件導向是一種使用『抽象化概念表達實體』的程式設計模型，可以定義出一些共用的屬性與方法，提升重用（reuse）的程度。
先來簡單講解一下 『抽象化概念表達實體』 的意思吧!「抽象化概念」顧名思義…就是頗抽象的，所以得透過舉例的方式來說明，其實網路上對於物件及物件導向有千百種解釋，這邊我就用我的方法解釋嘍，「抽象化概念」就像你看到外星人時，因為外星人不是我們腦海內已經擁有的物件，你就會用自己的方式去描述這個他，這就是抽象化概念，換個說法：抽象化概念就是你對一個物件的基本定義。
舉例來說，當我要介紹我朋友(是一個人)給大家認識時，大家對他的一切都很陌生，完全不了解他，但是就算你們不認識他，至少你們也已經會知道，我這個朋友，大致上就是有兩個眼睛、一個鼻子、一個嘴巴、兩隻手、兩隻腳、用腳走路、用嘴吃飯…等等，只是有關於他的一切都還很抽象，在我還沒有把他正式的帶出來給大家認識以前，大概就只知道他是個「人」，而你腦海內浮出的「人」的基本原型，就是所謂的抽象化概念嘍。
『實體』 則是把抽象概念具體化，為了讓你們認識我的朋友，我把這位「人」帶到你們面前，介紹你們認識，實際認識了我朋友之後，就不會再覺得他是抽象的，因為他是一個具體的人，例如：
他皮膚黑黑的。
他身體胖胖的。
他的興趣是唱歌。
他常常打大雄。
他是孩子王。
這就是一個抽象的人如何變成胖虎的故事…。
看到這邊，當我下次又要介紹新朋友給大家認識時，大家腦海中又會再次浮出我朋友是個 『人』 這個抽象化概念，而實際見面認識以後，又會對這位新朋友有更具體的了解而把他具體化。
因此 『人』 就是我們可以一直拿來重復使用的原型物件，而我介紹給大家認識的朋友就是繼承了 『人』 這個原型而具體化後的物件，我想接下來就可以直接看 Code 來理解了。
以下例子我們先簡單的定義 People 這個物件，有名字與性別與年齡。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<script>
function People(name, gender, age) {
this.name = name;
this.gender = gender;
this.age = age;
}
</script>
</body>
</html>
接著我要使用定義好的 People ，創造出一個人，把他實體化，例如他是我之前舉例的朋友一號-胖虎。
我們宣告一個變數 myFriend_01 ，再使用 『new』 運算子， myFriend_01 為一個 People，並且給他實際的值。
程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<body>
<p id="myDemo"></p>
<script>
function People(name, gender, age) {
this.name = name;
this.gender = gender;
this.age = age;
}
var myFriend_01 = new People("胖虎", "男孩", 15);
/* 將 myFriend_01 的名字顯示在 myDemo 裡*/
document.getElementById("myDemo").innerHTML =
"我的朋友是 " + myFriend_01.name +" 。";
</script>
</body>
</html>
以上就是自己定義原型物件以及使用他將他實體化的簡單例子。
所以要建立朋友二號的時候，大家應該都知道該怎麼做了，程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<p id="myDemo1"></p>
<p id="myDemo2"></p>
<script>
function People(name, gender, age) {
this.name = name;
this.gender = gender;
this.age = age;
}
var myFriend_01 = new People("胖虎", "男孩", 15);
var myFriend_02 = new People("阿福", "男孩", 15);
/* 將 myFriend_01 的名字顯示在 myDemo1 裡*/
document.getElementById("myDemo1").innerHTML =
"朋友一號的名字是 " + myFriend_01.name +" 。";
/* 將 myFriend_02 的名字顯示在 myDemo2 裡*/
document.getElementById("myDemo2").innerHTML =
"朋友二號的名字是 " + myFriend_02.name +" 。";
</script>
</body>
</html>
當然我們也可以為 Poeple 直接新增屬性，以下是給 Poeple 新增一個體重 (weight) 的屬性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
<p id="myDemo"></p>
<script>
function People(name, gender, age, weight) {
this.name = name;
this.gender = gender;
this.age = age;
this.weight = weight;
}
var myFriend_01 = new People("胖虎", "男孩", 15, "100kg");
/* 將 myFriend_01 的名字及體重顯示在 myDemo 裡*/
document.getElementById("myDemo").innerHTML =
"我的朋友是 " + myFriend_01.name +"，" + "體重是 " + myFriend_01.weight +"。";
</script>
</body>
</html>
接著我們也可以幫他加入一些行為方法 (Method)，以下為幫 People 加一個 sayHello 的行為：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<body>
<p id="myDemo"></p>
<script>
function People(name, gender, age, weight) {
this.name = name;
this.gender = gender;
this.age = age;
this.weight = weight;
}
/* 在 console 印出 Hello*/
People.prototype.sayHello = function()
{
console.log('Hello');
};
var myFriend_01 = new People("胖虎", "男孩", 15, "100kg");
/* 將 myFriend_01 的名字及體重顯示在 myDemo 裡*/
document.getElementById("myDemo").innerHTML =
"我的朋友是 " + myFriend_01.name +"，" + "體重是 " + myFriend_01.weight +"。";
myFriend_01.sayHello();
</script>
</body>
</html>
如果我們想知道目前物件的所有屬性與值，可以利用 for 迴圈來取得，程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<body>
<p id="myDemo"></p>
<script>
function People(name, gender, age, weight) {
this.name = name;
this.gender = gender;
this.age = age;
this.weight = weight;
}
/* 在 console 印出 Hello*/
People.prototype.sayHello = function()
{
console.log('Hello');
};
var myFriend_01 = new People("胖虎", "男孩", 15, "100kg");
/* 將 myFriend_01 的名字及體重顯示在 myDemo 裡*/
document.getElementById("myDemo").innerHTML =
"我的朋友是 " + myFriend_01.name +"，" + "體重是 " + myFriend_01.weight +"。";
for(var prop in myFriend_01)
{
console.log(prop + ': ' + myFriend_01[prop]);
}
</script>
</body>
</html>
根據這邊的簡單範例，因為 People 的基本屬性都已經定義好了，以後要再增加新朋友時就很方便嘍，這邊只是介紹 Object Prototypes 的基礎用法，希望對大家有幫助。
