一篇文章带你了解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对象的原型，用大写字母命名构造函数是很好的做法。
完整代码：
<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属性允许你为一个已经存在的原型添加新的属性。每个模块都做了详细讲解，代码的展示。
使用编程语言，希望能够帮助你学习。
------------------- End -------------------
往期精彩文章推荐：
欢迎大家点赞，留言，转发，转载，感谢大家的相伴与支持
想加入前端学习群请在后台回复【入群】
万水千山总是情，点个【在看】行不行
本文分享自微信公众号 - 前端进阶学习交流（gh_cf4e462f0835）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
