JavaScript Prototype函数详解

在学习原型之前，请务必查看以下教程:

• JavaScript 对象
• JavaScript 构造函数

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

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23
}

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

在上面的示例中，function Person()是一个对象构造函数。无涯教程从中创建了两个对象 person1 和 person2 。

原型

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

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

const person = new Person();

// 检查原型值
console.log(Person.prototype);//{ ... }

在上面的示例中，无涯教程尝试访问Person构造函数的prototype属性。

由于prototype属性目前没有任何值，因此它显示一个空对象 {...} 。

原型继承

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

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23
}

// 创建对象
const person1 = new Person();
const person2 = new Person();

// 向构造函数添加属性
Person.prototype.gender = 'male';

// Person 的原型值
console.log(Person.prototype);

// 从原型继承属性
console.log(person1.gender);
console.log(person2.gender);

输出

{ gender: "male" }
male
male

在上面的程序中，使用以下命令向Person构造函数添加了新的属性gender :

Person.prototype.gender = 'male';

然后对象person1 和person2 从Person 构造函数的prototype属性继承属性gender 。

因此，对象person1和person2 都可以访问 gender 属性。

objectConstructorName.prototype.key = 'value';

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

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

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

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23
}

// 创建对象
const person1 = new Person();
const person2 = new Person();

// 向构造函数添加方法
Person.prototype.greet = function() {
    console.log('hello' + ' ' +  this.name);
}

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

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

改变原型

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

无涯教程网

// 构造函数
function Person() {
    this.name = 'John'
}

// 添加属性
Person.prototype.age = 20;

//创建一个对象
const person1 = new Person();

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

// 改变原型的属性值
Person.prototype = { age: 50 }

// 创建新对象
const person3 = new Person();

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

注意:您不应修改标准JavaScript内置对象(例如字符串，数组等)的原型。这被认为是一种不好的做法。

原型链

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

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

// 添加属性
Person.prototype.name = 'Peter';
Person.prototype.age = 23

const person1 = new Person();

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

在上面的程序中，在构造函数中以及构造函数的prototype属性中声明了属性 name 。

程序执行时，person1.name在构造函数中查找是否有一个名为name的属性。由于构造函数具有值为'John'的 name 属性，因此该对象从该属性获取值。

程序执行时，person1.age 在构造函数中查找是否有一个名为age的属性。由于构造函数没有age属性，因此程序会查看构造函数的原型对象，并且该对象会从原型对象(如果有)中继承属性。

注意:您还可以从对象访问构造函数的prototype属性。

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

// 添加原型
Person.prototype.age = 24;

// 创建对象
const person = new Person();

// 访问原型属性
console.log(person.__proto__);  //{ age: 24 }

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