如何用一幅图看清constructor、prototype、__proto__和原型链之间的关系？

一幅画，看清constructor、prototype、__proto__和原型链的关系

在JavaScript中，Function对象和Object对象这两个内置对象的特殊性，常常让很多刚入门的小白感到困惑。但其实，如果你能理解constructor、prototype、__proto__和原型链之间的关系，那么一切都会变得简单起来。

constructor

constructor是JavaScript中的一个内置属性，它指向一个对象的构造函数。构造函数是一个用来创建对象的函数，它可以被用来生成新对象。例如，以下代码创建了一个新的Date对象：

const date = new Date();

date变量是一个Date对象，它的constructor属性指向Date构造函数。

prototype

prototype是JavaScript中的另一个内置属性，它指向一个对象的原型对象。原型对象是一个包含了对象属性和方法的特殊对象。当一个对象没有一个属性或方法时，JavaScript就会去它的原型对象中查找。例如，以下代码创建一个新的数组对象：

const array = [];

array变量是一个数组对象，它的prototype属性指向Array原型对象。Array原型对象包含了许多数组属性和方法，比如length、push()和pop()。

proto

__proto__是JavaScript中的一个内置属性，它指向一个对象的原型对象。与prototype属性不同的是，__proto__属性是只读的，不能被重新赋值。例如，以下代码尝试重新赋值__proto__属性：

array.__proto__ = {};

这个代码会抛出一个错误，因为__proto__属性是只读的。

原型链

原型链是一个对象继承链，它从一个对象一直延伸到Object.prototype对象。当一个对象没有一个属性或方法时，JavaScript就会去它的原型对象中查找。如果原型对象中也没有，那么JavaScript就会继续去原型对象的原型对象中查找，依此类推。直到找到Object.prototype对象，或者找到包含该属性或方法的对象。

例如，以下代码尝试访问array对象的length属性：

const length = array.length;

如果array对象中没有length属性，JavaScript就会去它的原型对象Array.prototype中查找。Array.prototype对象中包含length属性，因此JavaScript会找到length属性并将其赋值给length变量。

总结

constructor、prototype、__proto__和原型链是JavaScript中非常重要的概念。理解这些概念可以帮助你更好地理解JavaScript中的面向对象编程。

希望通过这幅图解，能够帮助你更好地理解constructor、prototype、__proto__和原型链之间的关系。