一篇文章帶你了解JavaScript對象原型
每一個JavaScript對象有一個原型，prototype也是一個對象。所有的JavaScript對象繼承的屬性和方法從它們的prototype。
一、JavaScript 原型
使用對象字面量創建對象，或者使用new Object()，從一個稱作Object.prototype的原型(prototype)繼承。使用 new Date()創建對象，繼承Date.prototype。
Object.prototype 是原型鏈的頂級原型。所有的JavaScript對象(Date, Array, RegExp, Function, ....) 都繼承Object.prototype。
1. 創建一個原型
創建對象原型的標準方法是使用對象構造函數:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}使用構造函數，可以使用new關鍵字從同一原型創建新對象。
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sall", "Rally", 60, "green");構造函數是Person對象的原型，用大寫字母命名構造函數是很好的做法。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sall", "Rally", 60, "green");
document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age;
</script>
</body>
</html>
2. 原型添加屬性
不能將新屬性添加到原型中，就像將新屬性添加到現有對象一樣，因為該原型不是現有對象。
Person.nationality = "Chinese";若要向原型添加新屬性，必須將其添加到構造函數:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "Chinese";
}
原型屬性可以有原型值（默認值）。
3. 為原型添加方法
構造函數也可以定義方法:
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.name = function() {
return this.firstName + " " + this.lastName
};
}
var myFather = new Person("John", "ele", 50, "blue");
document.getElementById("demo").innerHTML =
"My father is " + myFather.name();
</script>
二、向對象添加屬性和方法
有時，希望向現有對象添加新屬性，（或方法），希望將新屬性（或方法）添加到給定類型的所有現有對象中，您向對象原型添加新屬性（或方法）。
1. 向對象添加屬性
向現有對象添加新屬性很容易。
myFather.nationality = "English";屬性將被添加到myFather，不是myMother，也不是任何其他person對象。
2. 向對象添加方法
向現有對象添加新方法也很容易：
myFather.name = function () {
return this.firstName + " " + this.lastName;
};方法將被添加到myFather。不是myMother。
三、使用 prototype 屬性
JavaScript prototype屬性允許你為一個已經存在的原型添加新的屬性:
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.nationality = "Math";
var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality;
</script>
JavaScript原型屬性還允許您添加新的方法對現有的原型:
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName
};
var myFather = new Person("name", "oe", 50, "blue");
document.getElementById("demo").innerHTML =
"My father is " + myFather.name();
</script>
只修改你設定的自己原型。不修改標準的JavaScript對象的原型。
四、總結
本文基于JavaScript基礎。介紹了JavaScript對象原型的基礎知識點。如何在原型的基礎上添加屬性和方法。如何在對象在添加屬性和方法。以及使用prototype屬性允許你為一個已經存在的原型添加新的屬性。每個模塊都做了詳細講解，代碼的展示。
使用編程語言，希望能夠幫助你學習。
