关于 js 的原型链

最新推荐文章于 2025-09-21 12:00:00 发布

原创最新推荐文章于 2025-09-21 12:00:00 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #面试 #原型 #原型链 #prototype

面试时，经常有这个问题：

如何理解原型链

原型与原型链

先看这样一段代码：

let obj = {}
obj.__proto__.haha = 'gogo'
console.log(obj.haha) // "gogo"

运行一下上面的代码，输出结果为 gogo

有几个疑问：

obj 哪来的 __proto__属性？
为什么添加到 __proto__上的属性，可以直接通过 obj 拿到？

第一个问题

js 中每个对象都有一个“原型”
原型一般可以通过 __proto__访问到

let obj = {}
console.log(obj.__proto__)

原型，也是一个对象
就像每个“人”都有一个“爸爸”，但“爸爸”也是一个“人”
“爸爸”除了是某个人的爸爸外，与其他人并没有本质的区别
爸爸，也是普通人
类似的，“原型”是一个普通的对象
爸爸也有他的爸爸，原型也有它的原型

第二个问题

不同的是，人不可以随便拿爸爸的东西，而对象可以随便拿原型里的东西（很多人并不懂这个，我说的是前半句）

比如，当你向一个对象，索要一个属性时
如果这个对象没有你要的属性，它就会让它的原型（爸爸）给你
如果它爸也没有，那它爸就会找它爸的爸：

let obj = {
  __proto__: {
    __proto__: {
      haha: 'gogo'
    }
  }
}
console.log(obj.haha) // "gogo"

如果这样写：

let 爷爷 = {
  haha: 'gogo'
}
let 爸爸 = {
  __proto__: 爷爷
}
let obj = {
  __proto__: 爸爸
}
console.log(obj.haha) // "gogo"

obj -> 爸爸 -> 爷爷像不像一条链子呢？
这就是原型链

以下内容，需要先了解 js 中的类，本文不详细介绍

prototype

有这样一句话：

类是对象的模板

你与我，都是人，“人”是类，是模板
你与我，都属于“人”类，有很多共性：

有一张嘴
有两条腿
会吃饭
会睡觉

这些共性是人类共有的

也有差异，比如我的名字叫 X，你的名字叫 Y
这些不同点，是对象“私有”的

看一段 js 创建对象的代码（注意注释部分）：

function Person(name) {
  this.name = name
}
Person.prototype.吃饭 = function() {
  console.log('吃吃吃')
}
Person.prototype.睡觉 = function() {
  console.log('睡睡睡')
}

let 我 = new Person('我')
我.吃饭() // "吃吃吃"
console.log(Person.prototype == 我.__proto__) // true
// 可以看出，在实例化的过程中，类的 prototype 成为对象的原型  

let 你 = new Person('你')
你.睡觉() // "睡睡睡"
console.log(我.__proto__ == 你.__proto__) // true
// 同一类的多个实例（对象），共享一个原型？

我.__proto__.吃饭 = function() {
  console.log('再吃一点')
}
console.log(我.吃饭 == 你.吃饭) // true
你.吃饭() // "再吃一点"
// 没错，同一类的多个实例，共享一个原型