【JavaScript】原型-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JavaScript】原型。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在 JavaScript 中，每个对象都有一个原型（prototype），它是一个对象本身，而不是一个函数。原型机制是 JavaScript 的核心特性之一，它允许对象继承另一个对象的属性和方法。

以下是关于 JavaScript 原型的基本概念和用法：

原型链：

每个对象都有一个原型，而原型本身也是一个对象，因此可以形成一个原型链。当访问一个对象的属性或方法时，JavaScript 首先在对象本身查找，然后在其原型上查找，如果还没有找到，就会继续在原型的原型上查找，以此类推，直到找到或者到达原型链的末端。
prototype 属性：

在 JavaScript 中，构造函数（函数用于创建对象）有一个 prototype 属性，它是一个对象，用于存储该构造函数的实例共享的属性和方法。当使用构造函数创建对象时，对象会继承构造函数的 prototype 对象的属性和方法。
__proto__ 属性：

每个对象都有一个 __proto__ 属性，它指向对象的原型。通过 __proto__ 属性，可以访问对象的原型上的属性和方法。
原型的继承：
- 当一个对象被用作另一个对象的原型时，那么这个对象就是继承者的原型。
- 继承者对象可以访问原型对象的属性和方法，就好像它自己拥有这些属性和方法一样。
- 如果继承者对象自身有和原型对象同名的属性或方法，那么它会覆盖原型对象的属性或方法。

以下是一个简单的示例，展示了原型的概念：

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

// 在构造函数的 prototype 上添加方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

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

// 调用原型上的方法
person1.sayHello(); // 输出：Hello, my name is Alice
person2.sayHello(); // 输出：Hello, my name is Bob

// 使用 __proto__ 访问原型
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

在这个示例中，Person 是一个构造函数，Person.prototype 是一个对象，我们将方法 sayHello 添加到了 Person.prototype 上。当创建 person1 和 person2 对象时，它们继承了 Person.prototype 的属性和方法，因此可以调用 sayHello 方法。

类的原型对象：

类是构造函数的语法糖，因此类的实例化过程实际上也是通过构造函数来创建对象的，因此类和构造函数都具有原型的概念。

在类中，类的原型可以被称为类的原型对象（class prototype object），它类似于构造函数的原型。类的实例会继承类的原型对象上的方法和属性，类似于使用构造函数创建的对象会继承构造函数的原型上的方法和属性。

下面是一个简单的示例，展示了类的原型的概念：

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person("Alice");
const person2 = new Person("Bob");

person1.sayHello(); // 输出：Hello, my name is Alice
person2.sayHello(); // 输出：Hello, my name is Bob

console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

在这个示例中，Person 是一个类，Person.prototype 是类的原型对象，我们在类中定义了方法 sayHello，该方法被添加到了 Person.prototype 上。当创建 person1 和 person2 对象时，它们继承了 Person.prototype 的属性和方法，因此可以调用 sayHello 方法。

总之，类和构造函数都具有原型的概念，类的实例化过程实际上也是通过构造函数来实现的，因此类的原型在类的继承和方法共享方面具有重要作用。

下面是一个简单的示例来说明原型链的概念：

function Tree(height) {
    this.height = height;
}

Tree.prototype.getHeight = function () {
    return this.height;
}

const highTree = new Tree(10);

// highTree.__proto__ === Tree.prototype; // true
// Tree.__proto__ === Function.prototype; // true

// highTree.__proto__.__proto__ === Object.prototype; // true
// highTree.__proto__.__proto__ === Function.prototype  // false
// Object.prototype.__proto__ === null; // true

// Object.__proto__ === Function.prototype; // true
// Function.__proto__ === Function.prototype; // true
// Function.prototype.__proto__ === Object.prototype; // true