窥探原型链中的秘密：用new操作符揭秘prototype和proto

前端

2023-11-16 16:28:24

前言

原型和__proto__是JavaScript中的两个重要概念，也是面试中的常见问题。这两个概念虽然相似，但又有细微差别。为了理解prototype和__proto__之间的关系，我们需要首先了解构造函数的作用。

构造函数

构造函数是用于创建对象的函数，它使用new调用。构造函数可以被视为一个工具，用于创建一个新的对象。当我们使用new关键字调用构造函数时，它会创建一个新对象，并将这个新对象作为构造函数的返回值。

原型

原型是一个对象，它是构造函数的属性。原型对象包含了构造函数的所有属性和方法。当我们创建了一个新的对象时，这个对象会继承原型对象的所有属性和方法。

proto

__proto__是对象的属性，它指向对象的原型对象。这意味着，我们可以通过对象的__proto__属性访问对象的原型对象。

理解prototype和proto之间的关系

为了更好地理解prototype和__proto__之间的关系，我们可以结合new操作符来进行理解。

当我们使用new关键字调用构造函数时，它会创建一个新对象，并将这个新对象作为构造函数的返回值。同时，它还会将构造函数的原型对象赋值给这个新对象的__proto__属性。

因此，我们可以说，构造函数是创建对象的工具，原型对象是构造函数的属性，而__proto__属性指向对象的原型对象。

实例

为了更好地理解prototype和__proto__之间的关系，我们来看一个实例。

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

const person1 = new Person("John");
person1.__proto__ === Person.prototype; // true
person1.sayHello(); // Hello, my name is John