js原型链prototype解释

news2025/7/18 14:23:14

function Person(){}
var person=new Person() 
console.log('======啊啊',Person instanceof Function);//true
console.log('======',Person.__proto__==Function.prototype);//true
console.log('======',Person.prototype.__proto__ === Object.prototype);//true
console.log('======',Function.prototype.__proto__==Object.prototype);//true
var arr=[]
console.log('======',arr.__proto__==Array.prototype);//true
console.log('======',Array.prototype.__proto__==Object.prototype);//true
function Animal() {}
Animal.prototype.eat = function() { console.log("Eating...") };

function Dog() {}
Dog.prototype = new Animal(); // Dog 继承 Animal
Dog.prototype.bark = function() { console.log("Bark!") };

const myDog = new Dog();
console.log('======',myDog.__proto__.__proto__=== Animal.prototype);//true

上述代码都是true

理解 JavaScript 中的原型链（Prototype Chain）是掌握其面向对象编程的核心。原型链的本质是通过对象的隐式原型（[[Prototype]]，即 __proto__）连接形成的链式结构，用于实现属性和方法的继承。以下是逐步解析：

一、原型链的核心机制

每个对象都有一个隐式原型（__proto__）
在 JavaScript 中，几乎所有对象（包括函数）都有一个 __proto__ 属性，指向它的构造函数的 prototype 对象。
构造函数的 prototype 属性
每个函数在创建时会自动生成一个 prototype 属性，它是一个对象，其中默认包含 constructor 属性指向函数自身。例如：
```
function Person() {}
console.log(Person.prototype.constructor === Person); // true
```
3.实例的原型链形成
当通过 new 创建实例时，实例的 __proto__ 会指向构造函数的 prototype 对象：

const person = new Person();
console.log(person.__proto__ === Person.prototype); // true

4.链式继承
如果构造函数的 prototype 本身也有 __proto__，则会继续向上查找，直到 Object.prototype，最终指向 null：

console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

原型链的层级关系

function Animal() {}
Animal.prototype.eat = function() { console.log("Eating...") };

function Dog() {}
Dog.prototype = new Animal(); // Dog 继承 Animal
Dog.prototype.bark = function() { console.log("Bark!") };

const myDog = new Dog();

// 原型链层级：
// myDog → Dog.prototype → Animal.prototype → Object.prototype → null