再解 JavaScript 原型与原型链

简介: JavaScript 原型与原型链虽然是一个老生常谈的话题,但依然困惑着很多人,今天我再来从另一个角度谈谈这个问题。

5.png


前言


JavaScript 原型与原型链虽然是一个老生常谈的话题,但依然困惑着很多人,今天我再来从另一个角度谈谈这个问题。


两个疑问


先看这样一段代码:


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


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


针对这个结果,有以下疑问:


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


第一个问题


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


let obj = {}
console.log(obj.__proto__)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}


可以这么理解:原型,也是一个对象


就像:


  • 每个“人”都有一个“爸爸”;
  • 但“爸爸”也是一个“人”;
  • “爸爸”除了是某个人的爸爸外,与其他人并没有本质的区别;
  • 爸爸,也是普通人。


类似的:


  • “原型”是一个普通的对象;
  • 爸爸也有他的爸爸,原型也有它的原型。


第二个问题


对象与人不同的是:


  • 人不可以随便拿爸爸的东西
  • 而对象可以随便拿原型里的东西


比如,当你向一个对象,索要一个属性时:


  • 如果这个对象没有你要的属性,它就会让它的原型(爸爸)给你
  • 如果它爸也没有,那它爸就会找它爸的爸


比如下面这个例子:


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


因为 obj 本身没有 haha 这个属性,所以它会去自己的 __proto__  中查找,如果还没有找到,那就会向它的 __proto__.__proto__ 中去找,直到找到 haha 属性或者 __proto__ 链返回 null 为止。


再换一种写法:


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


查找 haha 属性的过程是:  obj -> 爸爸 -> 爷爷 ,像不像是一条链子呢?这就是原型链。


关于 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、性能优化时,底层的知识是肯定有大用途的。


~ 本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!




相关文章
|
1月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
3月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
31 0
|
17天前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
17天前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
19天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
29天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
31 1
|
1月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
25 0
|
1月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
32 0
|
1月前
|
JavaScript 前端开发 安全
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
28 0
|
2月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26