关于 js 的原型链

面试时,经常有这个问题:

如何理解原型链

原型与原型链

先看这样一段代码:

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.吃饭() // "再吃一点"
// 没错,同一类的多个实例,共享一个原型

类比于人类社会,就是:
你的兄弟姐妹和你“共享”一个爸爸
当你的爸爸烫了个头时,你弟弟的爸爸也烫头。这个过程中,不是两个爸爸同时烫头,而是本来就一个爸爸

重要结论:

  • 实例化的过程中(也就是“当 new 一个对象的时候”),类的 prototype 成为对象的原型
  • 同一个类的多个实例(也就是“对象”),共享一个原型

学以致用

原型是 js 底层的东西
不懂原型,几乎不影响工作

类似“原型有什么用”的问题,就像“砖块(或水泥)对盖楼有什么用”
其实在写代码的过程中,几乎不会用到原型的知识
但是如果遇到了问题、出现了 bug、性能优化时
底层的知识是肯定有大用途的

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值