一篇文章带你了解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源创计划”，欢迎正在阅读的你也加入，一块儿分享。