一篇文章帶你瞭解JavaScript對象原型

點擊上方「 前端進階學習交流 」，進行關注

回覆「前端」便可獲贈前端相關學習資料javascript

今html

日前端

雞java

湯web

野火燒不盡，春風吹又生。

每個JavaScript對象有一個原型，prototype也是一個對象。全部的JavaScript對象繼承的屬性和方法從它們的prototype。編程

1、JavaScript 原型

使用對象字面量建立對象，或者使用new Object()，從一個稱做Object.prototype的原型(prototype)繼承。使用 new Date()建立對象，繼承Date.prototype。數組

Object.prototype 是原型鏈的頂級原型。全部的JavaScript對象(Date, Array, RegExp, Function, ....) 都繼承Object.prototype。微信

1. 建立一個原型

建立對象原型的標準方法是使用對象構造函數:app

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor;}

使用構造函數，可使用new關鍵字從同一原型建立新對象。less

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>

2、向對象添加屬性和方法

有時，但願向現有對象添加新屬性，（或方法），但願將新屬性（或方法）添加到給定類型的全部現有對象中，您向對象原型添加新屬性（或方法）。

1. 向對象添加屬性

向現有對象添加新屬性很容易。

myFather.nationality = "English";

屬性將被添加到myFather，不是myMother，也不是任何其餘person對象。

2. 向對象添加方法

向現有對象添加新方法也很容易：

myFather.name = function () { return this.firstName + " " + this.lastName;};

方法將被添加到myFather。不是myMother。

3、使用 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對象的原型。

4、總結

本文基於JavaScript基礎。介紹了JavaScript對象原型的基礎知識點。如何在原型的基礎上添加屬性和方法。如何在對象在添加屬性和方法。以及使用prototype屬性容許你爲一個已經存在的原型添加新的屬性。每一個模塊都作了詳細講解，代碼的展現。

使用編程語言，但願可以幫助你學習。

------------------- End -------------------

往期精彩文章推薦：

歡迎你們點贊，留言，轉發，轉載，感謝你們的相伴與支持

想加入前端學習羣請在後臺回覆【入羣】

萬水千山老是情，點個【在看】行不行

本文分享自微信公衆號 - 前端進階學習交流（gh_cf4e462f0835）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。