读原型和原型链，通js底层原理

站长

2024年06月12日 11:07 · 阅读数 27

前言

JavaScript 中的原型（prototype）和原型链（prototype chain）是理解该语言中面向对象编程的核心概念之一。

原型（prototype） ：
- 在 JavaScript 中，每个对象都有一个原型（prototype），它是一个指向另一个对象的引用。这个对象被称为原型对象。
- 当试图访问一个对象的属性时，如果对象本身没有这个属性，JavaScript 就会沿着原型链向上查找，直到找到相应的属性或到达原型链的末尾（即 Object.prototype）为止。
- 可以通过 Object.getPrototypeOf() 方法来获取对象的原型。
原型链（prototype chain） ：
- 原型链是一种对象之间关系的模型，其中每个对象都有一个指向其原型的引用，从而形成一个链式结构。
- 当试图访问一个对象的属性时，JavaScript 引擎会先在该对象本身的属性中查找，如果没有找到，就会沿着原型链向上查找，直到找到相应的属性或到达原型链的末尾。
- 原型链的最顶端是 Object.prototype，它是 JavaScript 中所有对象的根原型。

原型和原型链的概念使得 JavaScript 中的对象能够共享属性和方法，并且能够实现继承和属性委托等特性。通过原型链，可以实现对象之间的属性和方法的共享和继承，从而有效地提高代码的复用性和可维护性。

prototype，proto和constructor的理解

1.函数本身属性

读原型和原型链，通js底层原理

函数也属于对象，我们可以从中看出，其长度是形参的个数，【【scope】】为函数的作用域我们不可访问，但是对浏览器来说非常重要，函数的名字就是它的名字，虽然看起来有点多余了哈。

2.抽取出共同属性给原型对象

读原型和原型链，通js底层原理

我们可以看见，在代码中，除了color和owner是传入参数决定，其他的东西都是固定的，我们就可以把共同拥有的属性或者方法抽出，放在构造函数的原型对象上。

读原型和原型链，通js底层原理

构造函数的原型对象上的属性其实例对象均可使用，但是是隐式的，也就是说，我们打印实例对象的时候也访问不到，必须通过访问属性的方式。

读原型和原型链，通js底层原理

那么下面大家看看这段代码读原型和原型链，通js底层原理

这个时候我们会发现product会打印‘huawei’但是已经是显性了。为什么呢？因为这个时候的product和原型对象身上的product、并不是一个东西。

因此，我们给出以下三条结论。读原型和原型链，通js底层原理

3.关于三者的理解

读完下面代码会加深我们的理解

function People(color) {
  this.color = color
}
People.prototype.ear = 2
let p = new People('yellow')
console.log(p.__proto__ === People.prototype);
console.log(p.constructor === People.prototype.constructor);
console.log(p.constructor === People);
console.log(p.__proto__.__proto__ === Object.prototype);
console.log(p.__proto__.__proto__.constructor === Object);

最终结果都是true，为什么呢？

p.__proto__ === People.prototype:
- __proto__ 是一个指向对象的原型的属性。在这里，p 是通过 People 构造函数创建的，因此它的原型是 People.prototype。所以，这个表达式返回 true。
p.constructor === People.prototype.constructor:
- constructor 是 JavaScript 对象的一个属性，指向创建该对象的构造函数。People.prototype.constructor 是 People 函数本身，因为它是 People.prototype 的默认构造函数。因此，p.constructor 也会指向 People，所以这两个是相同的。
p.constructor === People:
- 这个表达式检查 p 的构造函数是否是 People。由于 p 是通过 People 构造函数创建的，因此这个表达式返回 true。
p.__proto__.__proto__ === Object.prototype:
- 由于 p.__proto__ 是 People.prototype，那么 p.__proto__.__proto__ 是 People.prototype 的原型。对于大多数构造函数的原型，它们的原型是 Object.prototype。因此，这个表达式是检查 People.prototype 的原型是否是 Object.prototype，结果是 true。
p.__proto__.__proto__.constructor === Object:
- 这里，p.__proto__.__proto__ 是 Object.prototype，这个原型的 constructor 是 Object 构造函数。因此，这个表达式是检查 Object.prototype.constructor 是否是 Object，结果也是 true。