《从 person 到 null:一张图看懂 JavaScript 原型链》

65 阅读3分钟

屏幕截图 2025-11-25 213143.png

🌟 先说一句话总结:

这张图展示的是:当你创建一个对象时,它如何通过 __proto__ 一层层向上找属性和方法,直到最后的 null


🔍 第一步:认识图中的角色

我们先看看图里有哪些东西:

  1. Person (构造函数)
    → 就是一个普通的函数,用来“制造”人(对象)的模板。
  2. Person.prototype
    → 是 Person 函数自带的一个“原型对象”,所有由 Person 创建的对象都会继承它的属性和方法。
  3. person(实例)
    → 是用 new Person() 创建出来的具体对象,比如小明、小红。
  4. Object()
    → JavaScript 中所有对象的“祖宗”,所有对象都来自它。
  5. Object.prototype
    → 所有对象的最终原型,它包含一些通用的方法,比如 toString()hasOwnProperty() 等。
  6. null
    → 最终的终点,表示没有再往上找了。

🧩 第二步:画出关系,像搭积木一样

我们从上到下看:


✅ 1. Person 和 Person.prototype 之间的关系

  • Person 是一个构造函数。
  • 它有一个属性叫 prototype,指向 Person.prototype(这个是系统自动给的)。
  • 而 Person.prototype 也有一个属性叫 constructor,指向 Person 构造函数。

👉 就像:

“我(Person)的 prototype 是 Person.prototype,而 Person.prototype 的 constructor 是我。”

这形成一个双向链接,就像两个朋友互相指着对方。


✅ 2. person 实例 和 Person.prototype 的关系

  • 当你写 var person = new Person(); 时,会创建一个新对象 person
  • 这个 person 对象内部有一个隐藏的属性叫 __proto__,它指向 Person.prototype

👉 就像:

“我是 person,我的爸爸是 Person.prototype。”

所以,当你访问 person.name 时,如果 person 没有这个属性,就会去 Person.prototype 里找。


✅ 3. Person.prototype 和 Object.prototype 的关系

  • Person.prototype 本身也是一个对象(它是 Object 的实例)。
  • 所以它也有自己的 __proto__,指向 Object.prototype

👉 就像:

“我是 Person.prototype,我的爷爷是 Object.prototype。”


✅ 4. Object.prototype 和 null

  • Object.prototype 是所有对象的终极祖先。
  • 它的 __proto__ 指向 null,表示“到这里为止了”。

👉 就像:

“我是 Object.prototype,我没有爸爸了,尽头就是 null。”


🔄 第三步:举个例子,让你完全明白

假设我们写代码:

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

Person.prototype.sayHello = function() {
    console.log("你好,我是" + this.name);
};

var person = new Person("小明");

现在我们来看看 person 到底能访问哪些东西:

  1. person.name → 找到了!在 person 自己身上。

  2. person.sayHello() → 找不到?别急!

    • 它会去 person.__proto__(也就是 Person.prototype)找。
    • 发现有 sayHello 方法!执行成功!
  3. person.toString() → 也没定义?

    • 先去 Person.prototype 找 → 没有。
    • 再去 Person.prototype.__proto__(也就是 Object.prototype)找 → 有!
    • 所以可以调用 toString()
  4. person.__proto__.__proto__.__proto__ → 最后是 null,停止查找。


📌 总结:原型链是什么?

原型链 就是:当一个对象找不到某个属性或方法时,就沿着 __proto__ 向上一层层找,直到找到或者到 null 为止。

就像你问:“我爸是谁?”
→ 爸说:“我爸爸是爷爷。”
→ 爷爷说:“我爸爸是太爷爷。”
→ 太爷爷说:“我没有爸爸了。”(null)


🎯 图解关键点(再看一遍图)

Person (构造函数)
     ↓
  person (实例)
     ↘ __proto__ → Person.prototype (实例原型)
                     ↓ __proto__ → Object.prototype
                                     ↓ __proto__ → null

同时:

  • Person.prototype.constructor === Person
  • Object.prototype.constructor === Object
  • Person.prototype.__proto__ === Object.prototype

💡 小贴士(帮你记牢)

名称是什么?类比
Person构造函数工厂
Person.prototype原型对象工厂的标准图纸
person实例对象用图纸造出来的产品
__proto__隐藏指针“我的爸爸是谁?”
Object.prototype最终祖先老祖宗
null终点“没爸爸了”

✅ 最后测试一下你懂了吗?

问:person 能不能用 toString()

答:

  • person 自己没有 → 查 __proto__ → Person.prototype 没有 → 查 Person.prototype.__proto__ → Object.prototype 有!✅

所以可以!


如果你还是觉得晕,没关系!
你可以把这张图当成一棵树:


                      null
                       ↑
                       |
                 Object.prototype
                       ↑
                       |
            Person.prototype
                       ↑
                       |
                    person

从下往上走,就是原型链!


🧠 记住口诀:

“实例找原型,原型找父原型,一直找,直到 null。”