JS进阶:prototype和__proto__、constructor及原型链,到底咋回事儿?我来给你讲个故事叭~

用自己的话讲有趣的知识


大家好,我是梅巴哥er。看到不少人对原型链产生云里雾里的感觉,尤其是prototype和__proto__,长的跟个双胞胎似的,且过于抽象,傻傻分不清楚。本篇我们就以讲故事的形式,来讲讲原型链的知识,讲的不一定全面,算是提供一点思路,抛砖引玉吧。


先写个例子:

log = console.log

function Star(name) {
    
    
    this.name = name 
}
Star.prototype.age = 18
var dili = new Star('dilireba')
log(Star.prototype)
log(dili.__proto__)
log(Star.prototype.constructor)
在开始讲之前,先来了解一下,prototype是怎么来的呢?

那就先看下阮一峰老师的讲解:Javascript继承机制的设计思想
简单来说,

  • prototype就是一个对象,它存在于函数中
  • 这个对象可以搞出一个共享区域
  • 这个对象可以往共享共享区域里添加属性和方法,让构造函数的实例都可以调用。
  • 例如Star.prototype.age = 18,这时候Star构造函数的实例都是18岁。
__proto__又是咋回事呢?
  • proto就是给实例提供一条查询链的
  • 它只是用来指向prototype,并不能用
  • 每个对象都有一个__proto__
  • 例如 dili.__proto__就是指向Star.prototype
constructor是啥?
  • prototype和__proto__里都有一个constructor
  • 作用是让构造函数的原型指回构造函数
  • 例如Star.protorype.constructor指向Star(){ }
理论知识看完了,那么怎么理解他们呢?

故事开始:

小明和小华一起到饭店去吃火锅。点了一个不辣锅底。

log = console.log

function Eat(name) {
    
    
    this.name = name 
    this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 不辣
log(hua.type) // 不辣

小明觉得味道不够辣,就去用自己的碗盛了一份辣酱,蘸着吃

log = console.log

function Eat(name) {
    
    
    this.name = name 
    this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
ming.type = '辣酱'
log(ming.type) // 辣酱
log(hua.type) // 不辣

于是,小明吃到了辣酱,小华吃的不辣的辣酱。现在小华也想吃辣酱,但是他又不好意思去小明碗里吃辣酱,咋办呢?

// 给小华也添加一份辣酱
hua.type = '辣酱'

这样,小华也吃到辣酱了。但是有个问题,这样俩人就没人一份,占用太多资源,有没有更好的办法呢?

没错,就是直接往锅底里加辣酱!

// 现在我们来改下代码
log = console.log

function Eat(name) {
    
    
    this.name = name 
}
Eat.prototype.type = '辣酱' // 往锅里加辣酱
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 辣酱
log(hua.type) // 辣酱

你看,这样俩人都吃到辣酱火锅啦!


看完上面的故事,是不是更清晰了?然后呢,问题来了,这些对象之间有啥关系呢?

那我们就来捋一捋。

刚开始,有个饭店可以给顾客提供火锅。
在这里插入图片描述
现在小明和小华来吃火锅。
在这里插入图片描述
两人要共享辣酱,于是锅里加了辣酱,把锅底变辣了。
在这里插入图片描述
现在是不是清晰多啦?

那么constructor又和他们有啥关系呢?

来继续看故事。

吃饱喝足,要结账啦!

服务员过来一看,呀,你们这桌吃的是辣酱火锅啊?

小明就说啦,我们点的是清汤火锅,只是往里加了辣酱。于是小明拿出点菜单指给服务员看。
在这里插入图片描述

costructor的作用是指回原来的构造函数,你看,小明能指给服务员看啦!

好啦,看到这里,基本上可以理解了这些对象之间的关系。那么,原型链又是怎么回事呢?

我们来继续讲故事。

小明和小华出了火锅店,一路还在讨论今天吃的辣酱火锅。那个辣酱太好吃啦,是哪里来的呢?

小华说,肯定是老干妈家生产的辣酱,那家场子生产很多种辣酱,今天吃的辣酱最好吃!!

于是,俩人沿着辣酱这条线,查到了老干妈这家场子。

在这里插入图片描述
小明这时候又问啦,老干妈上面是啥公司啊?

小华说,老干妈就是总公司啦,上面没啦!他们专门生产辣酱的!

在这里插入图片描述
于是,我们得到了这个图!

这就是原型链了!

啥?讲完了? 故事还没听够呢。小华,你等等!


参考文章:


以上。

猜你喜欢

转载自blog.csdn.net/tuzi007a/article/details/114298065