一篇文章带你了解JavaScript对象原型篇文prototype也是章带一个对象

2024-05-28 18:43:17 [百科] 来源：避面尹邢网

一篇文章带你了解JavaScript对象原型

作者：前端进阶者 2023-05-30 15:06:21开发前端每一个JavaScript对象有一个原型，篇文prototype也是章带一个对象。所有的象原型JavaScript对象继承的属性和方法从它们的prototype。

每一个JavaScript对象有一个原型，篇文prototype也是章带一个对象。所有的象原型JavaScript对象继承的属性和方法从它们的prototype。

一篇文章带你了解JavaScript对象原型篇文prototype也是章带一个对象

一、篇文JavaScript 原型

使用对象字面量创建对象，章带或者使用new Object()，象原型从一个称作Object.prototype的篇文原型(prototype)继承。使用 new Date()创建对象，章带继承Date.prototype。象原型

一篇文章带你了解JavaScript对象原型篇文prototype也是章带一个对象

Object.prototype 是篇文原型链的顶级原型。所有的章带JavaScript对象(Date, Array, RegExp, Function, ....) 都继承Object.prototype。

一篇文章带你了解JavaScript对象原型篇文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>