理解原型和原型链

devtools/2024/9/24 21:24:52/

当你理解JavaScript中的原型和原型链，你就能理解为什么JavaScript中一切皆对象，以及为什么函数也是对象。让我帮你梳理一下。

原型 (Prototype)

在JavaScript中，每个对象都有一个原型对象（prototype）。当你创建一个对象时，JavaScript会自动为这个对象分配一个原型，并且你可以通过 proto 属性来访问这个原型对象。

javascript">let obj = {}; // 创建一个空对象
console.log(obj.__proto__); // 输出：Object.prototype

原型链 (Prototype Chain)

原型链是由对象的原型对象组成的链条。当你试图访问一个对象的属性时，JavaScript引擎会首先在这个对象本身中查找，如果找不到，它会继续在原型链上查找，直到找到属性或者到达原型链的末端（即原型链为 null）。

javascript">let obj = {};
obj.toString(); // 查找toString方法，如果obj对象本身没有，则会在它的原型链上查找

构造函数 (Constructor)

构造函数是用来创建对象的函数。在JavaScript中，构造函数也是函数，因此它们也有原型，并且可以创建其他对象的实例。

javascript">function Foo() {} // 定义一个构造函数
let fooInstance = new Foo(); // 创建Foo的一个实例
console.log(fooInstance instanceof Foo); // 输出：true

原型和构造函数的关系

每个函数都有一个 prototype 属性，该属性指向一个对象，这个对象包含了由该构造函数创建的所有实例对象共享的属性和方法。当你创建一个新的实例时，该实例的 proto 属性会指向构造函数的 prototype 属性所指向的对象。

javascript">function Foo() {}
let fooInstance = new Foo();
console.log(fooInstance.__proto__ === Foo.prototype); // 输出：true

对象与函数的关系

在JavaScript中，函数也是对象，因此函数也有原型，并且可以作为构造函数使用。函数对象的原型链上有 Function.prototype，而 Function.prototype 的原型链上有 Object.prototype，最终指向 null。

javascript">function myFunction() {}
console.log(myFunction instanceof Function); // 输出：true
console.log(myFunction.__proto__ === Function.prototype); // 输出：true
console.log(Function.prototype.__proto__ === Object.prototype); // 输出：true
console.log(Object.prototype.__proto__); // 输出：null