JavaScript 原型

在继续本教程之前，请确保您熟悉

• JavaScript 对象
• JavaScript 构造函数

在 JavaScript 中，原型允许属性和方法在函数或对象的实例之间共享。例如，

function Car() {
    console.log("Car instance created!");
};

// add a property to prototype
Car.prototype.color = "Red";

// add a method to the prototype
Car.prototype.drive = function () {
    console.log(`Driving the car painted in ${this.color}...`);
};

// display the added property
console.log(`The car's color is: ${Car.prototype.color}`);

// call the added method
Car.prototype.drive();

输出

The car's color is: Red
Driving the car painted in Red...

在上面的示例中，我们定义了一个名为 Car() 的构造函数。

向原型添加属性

然后，我们添加了一个名为 color 的属性，并将其值设置为 Red。

Car.prototype.color = "Red";

我们可以使用代码 Car.prototype.color 访问此属性。

向原型添加方法

我们还向 Car 原型添加了一个名为 drive() 的方法。

Car.prototype.drive = function () {
    console.log(`Driving the car painted in ${this.color}...`);
};

我们可以使用代码 Car.prototype.drive() 访问此方法。

注意： 自从 ES6 引入 类 以来，原型的使用已大大减少。但是，您仍然可以学习它以加深对 JavaScript 的理解。

原型继承

添加到构造函数原型中的属性或方法可以被它派生的所有对象访问。例如，

function Car(model, year) {
    this.model = model;
    this.year = year;
};

// create multiple objects
let c1 = new Car("Mustang", 1964);
let c2 = new Car("Corolla", 1966);

// add property
Car.prototype.color = "Red";

// add method
Car.prototype.drive = function() {
    console.log(`Driving ${this.model}`);
};

// display added property using c1 and c2 objects
console.log(`${c1.model} color: ${c1.color}`);  
console.log(`${c2.model} color: ${c2.color}`);  

// display added method using c1 and c2 objects
c1.drive();
c2.drive();

输出

Mustang color: Red
Corolla color: Red
Driving Mustang
Driving Corolla

在上面的示例中，我们使用 Car() 构造函数创建了对象 c1 和 c2。

然后，我们将以下内容添加到 Car() 的原型中：

1. color 属性

• 它的值为 Red。
• c1 和 c2 分别可以使用 c1.color 和 c2.color 访问它。

2. drive() 方法

• 这是一个显示消息的方法。
• c1 和 c2 分别可以使用 c1.drive() 和 c2.drive() 访问它。

JavaScript 原型链

JavaScript 始终首先在构造函数对象的属性中搜索。然后，它在原型中搜索。

这个过程称为原型链。例如，

function Car() {
    this.color = "Red";
};

// add property that already exists
Car.prototype.color = "Blue";

// add a new property
Car.prototype.wheels = 4;

const c1 = new Car();

console.log(`The car's color is ${c1.color}.`); 
console.log(`The car has ${c1.wheels} wheels.`);

输出

The car's color is Red.
The car has 4 wheels.

在这里，我们在 Car() 构造函数中声明了 name 属性。然后，我们在其原型中添加了具有不同值的相同属性。

当我们显示 c1.color 时，JavaScript 会在 c1 中搜索 color，然后显示它，而不检查原型。

然而，JavaScript 在 c1 中找不到 wheels。因此，当我们显示 c1.wheels 时，它会显示原型属性。

Object.getPrototypeOf(objectName);

function Car() {
    this.name = "Mustang";
}

// add prototype property
Car.prototype.color = "Red";

// create object
let c1 = new Car();

// access prototype object of c1
console.log(Object.getPrototypeOf(c1));

// Output: { color: 'Red' }

ConstructorName.prototype.propertyName = newValue;

function Car() {
    this.color = "Red";
};

// add property wheels
Car.prototype.wheels = 4;

// create first car object
let c1 = new Car();

console.log(`Number of wheels on c1 before change: ${c1.wheels}`);

// change prototype property value
Car.prototype.wheels = 6;

// create second car object
let c2 = new Car();

console.log(`Number of wheels on c1 after change: ${c1.wheels}`);
console.log(`Number of wheels on c2: ${c2.wheels}`);

Number of wheels on c1 before change: 4
Number of wheels on c1 after change: 6
Number of wheels on c2: 6

Car.prototype.wheels = 6;

ConstructorName.prototype = { propertyName: newValue };

function Car() {
    this.color = "Red";
};

// add property wheels
Car.prototype.wheels = 4;

// create a car object
const c1 = new Car();

console.log(`Number of wheels on c1 before change: ${c1.wheels}`);

// replace prototype object
Car.prototype = { wheels: 6 };

// create new car object
const c2 = new Car();

console.log(`Number of wheels on c1 after change: ${c1.wheels}`);
console.log(`Number of wheels on c2: ${c2.wheels}`);

Number of wheels on c1 before change: 4
Number of wheels on c1 after change: 4
Number of wheels on c2: 6

Car.prototype = { wheels: 6 };

另请阅读

• JavaScript this 关键字