原型和原型链 prototype和proto的区别详情

原型和原型链是 JavaScript 中非常重要的概念，理解它们对于解决一些常见的 JavaScript 问题非常有帮助。下面就来详细讲解一下“原型和原型链 prototype和proto的区别详情”。

什么是原型？

在 JavaScript 中，每个对象都有一个原型对象。可以通过 Object.getPrototypeOf() 方法来获取对象的原型。一个对象的原型可以是另一个对象，如果一个对象的原型是另一个对象，那么它就可以继承另一个对象的属性和方法。

在 JavaScript 中，当我们访问一个对象的属性或者方法时，如果这个属性或者方法不存在，JavaScript 就会在原型对象中查找它。如果在原型对象中还是找不到，JavaScript 就会去原型对象的原型对象中查找，直到找到 Object.prototype，如果还是没找到，就会返回 undefined。

什么是原型链？

在 JavaScript 中，每个对象都有一个原型对象，而每个原型对象也有自己的原型对象，这样就形成了原型链。原型链的顶端是 Object.prototype，也就是说，如果在原型链中找到了 Object.prototype 还是找不到，那么就意味着这个属性或者方法不存在。

prototype 和 proto 的区别

在 JavaScript 中，每个函数都有一个 prototype 属性，它是一个对象，当我们用 new 运算符创建一个对象时，JavaScript 会将这个对象的原型设置为这个函数的 prototype 属性。

而 proto 属性则是在每个对象上都有的属性，它指向对象的原型。在访问一个对象的属性或者方法时，JavaScript 根据对象的 proto 属性来查找这些属性或者方法。当然，如果这些属性或者方法不存在，JavaScript 还会根据 proto 属性查找它继承的对象的 proto 属性，一直查找到 Object.prototype。如果还是找不到，返回 undefined。

下面来看两个例子：

例子一

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

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

const p = new Person('Tom');
p.sayHello();

在这个例子中，我们定义了一个构造函数 Person，然后通过 Person.prototype 添加了一个 sayHello 方法，在通过 new 运算符创建了一个对象 p，最后调用了 p 的 sayHello 方法。当我们调用 sayHello 方法时，JavaScript 会先在 p 对象上查找，如果找不到，就会去 Person.prototype 上查找，所以这里能够正常输出 “Hello, my name is Tom.”。

例子二

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

const p = new Person('Tom');
console.log(p.__proto__ === Person.prototype);

在这个例子中，我们定义了一个构造函数 Person，然后通过 new 运算符创建了一个对象 p，最后判断了 p 的 proto 属性是否等于 Person.prototype。结果是 true，这是因为在创建对象的时候，JavaScript 会将 p 的 proto 属性设置为 Person.prototype。

至此，我们已经讲解了原型和原型链 prototype和proto的区别详情。希望能够对你有所帮助。