在本教程中，您将借助示例了解 JavaScript 中的原型。
    在学习原型之前，请务必查看以下教程：

• JavaScript 对象
• JavaScript 构造函数

如您所知，您可以使用对象构造函数在 JavaScript 中创建对象。例如，

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// creating objects
const person1 = new Person();
const person2 = new Person();

在上面的例子中，function Person() 是一个对象构造函数。我们从中创建了两个对象 person1 和 person2。

JavaScript 原型

在 JavaScript 中，默认情况下，每个函数和对象都有一个名为 prototype （原型）的属性。例如，

function Person () {
    this.name = 'John',
    this.age = 23
}

const person = new Person();

// checking the prototype value
console.log(Person.prototype); // { ... }

在上面的例子中，我们试图访问 Person 构造函数的原型属性。
    由于原型属性此时没有任何值，所以它显示一个空对象 { … }。

原型继承

在 JavaScript 中，可以使用原型向构造函数添加属性和方法。对象从原型继承属性和方法。例如，

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// creating objects
const person1 = new Person();
const person2 = new Person();

// adding property to constructor function
Person.prototype.gender = 'male';

// prototype value of Person
console.log(Person.prototype);

// inheriting the property from prototype
console.log(person1.gender);
console.log(person2.gender);

输出

{ gender: "male" }
male
male

在上面的程序中，我们使用以下方法向 Person 构造函数添加了一个新属性 gender ：

Person.prototype.gender = 'male';

然后，对象 person1 和 person2 从 Person 构造函数的原型属性继承属性 gender。
    因此，对象 person1 和 person2 都可以访问 gender 属性。
    注意：将属性添加到对象构造函数的语法如下：

objectConstructorName.prototype.key = 'value';

原型用于为从构造函数创建的所有对象提供附加属性。

使用原型向构造函数添加方法

您还可以使用原型向构造函数添加新方法。例如，

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// creating objects
const person1 = new Person();
const person2 = new Person();

// adding a method to the constructor function
Person.prototype.greet = function() {
    console.log('hello' + ' ' +  this.name);
}

person1.greet(); // hello John
person2.greet(); // hello John

在上面的程序中，使用原型向构造函数 Person 添加了一个新方法 greet。

改变原型

如果原型值发生更改，则所有新对象都将具有更改后的属性值。所有先前创建的对象都将保持先前的值。例如，

// constructor function
function Person() {
    this.name = 'John'
}

// add a property
Person.prototype.age = 20;

// creating an object
const person1 = new Person();

console.log(person1.age); // 20

// changing the property value of prototype
Person.prototype = { age: 50 }

// creating new object
const person3 = new Person();

console.log(person3.age); // 50
console.log(person1.age); // 20

注意：您不应该修改标准 JavaScript 内置对象（如字符串、数组等）的原型。这是一种不好的做法。

JavaScript 原型链

如果一个对象试图访问构造函数和原型对象中的相同属性，该对象将从构造函数中获取该属性。例如，

function Person() {
    this.name = 'John'
}

// adding property 
Person.prototype.name = 'Peter';
Person.prototype.age = 23

const person1 = new Person();

console.log(person1.name); // John
console.log(person1.age); // 23

在上面的程序中，构造函数和构造函数的原型属性中都声明了一个属性 name。
    当程序执行时，person1.name 在构造函数中查看是否有名为 name 的属性。由于构造函数的 name 属性的值为 “John”，因此对象从该属性中获取值。
    当程序执行时，person1.age 在构造函数中查看是否有名为 age 的属性。由于构造函数没有 age 属性，程序会查看构造函数的原型对象，该对象会继承原型对象的属性（如果可用）。
    注意：还可以从对象访问构造函数的原型属性。

function Person () {
    this.name = 'John'
}

// adding a prototype
Person.prototype.age = 24;

// creating object
const person = new Person();

// accessing prototype property
console.log(person.__proto__);   // { age: 24 }

在上面的示例中，使用一个 person 对象来访问原型属性 proto。但是，__proto__已弃用，您应该避免使用它。

上一教程 ：Getter and Setter                                          下一教程 ：JS Array

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/prototype