一文掌握原型和原型链中prototype、proto和constructor的区别

2022-12-02 14:44:00

JavaScript 中的原型、proto 和构造函数：揭开原型链的奥秘

在 JavaScript 中，理解原型和原型链至关重要，它们是对象继承和属性查找的基础。这三者密不可分，发挥着至关重要的作用：prototype、__proto__ 和 constructor。本文将深入探讨它们的差异，帮助你更好地理解 JavaScript 中的原型和原型链。

什么是 prototype？

prototype 是一个指向另一个对象的指针，该对象包含了该对象的属性和方法。它是对象的原型，即它定义了对象的默认行为和属性。你可以通过 prototype 属性访问和修改对象的原型。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John Doe', 30);

// 访问原型方法
person1.sayHello(); // 输出: Hello, my name is John Doe and I am 30 years old.

什么是 proto？

__proto__ 属性也是一个指向对象的原型的指针。它的作用与 prototype 相同，但它是一个只读属性，不能直接修改对象的原型。在严格模式下，使用 __proto__ 访问对象的原型时，会抛出 TypeError 异常。因此，在严格模式下，推荐使用 prototype 属性来访问和修改对象的原型。

什么是 constructor？

constructor 属性指向对象的构造函数，该构造函数用于创建该对象。你可以通过 constructor 属性访问和修改对象的构造函数。

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

const person1 = new Person('John Doe', 30);

// 访问构造函数
console.log(person1.constructor); // 输出: function Person(name, age) { ... }

prototype、proto 和 constructor 的区别

属性	作用	可修改性	严格模式
`prototype`	指向对象的原型	可修改	推荐使用
`__proto__`	指向对象的原型	只读	抛出 `TypeError` 异常
`constructor`	指向对象的构造函数	可修改	可使用

原型和原型链

原型链是对象的原型指向的原型形成的链条。每个对象都有一个原型，原型又指向另一个原型，以此类推，直到到达 Object.prototype，它指向 null。

const person1 = new Person('John Doe', 30);

// 原型链
person1.__proto__ === Person.prototype; // true
Person.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true