【对标字节必会重点】原型链精讲

js 同时被 3 个专栏收录
16 篇文章 0 订阅
18 篇文章 0 订阅
16 篇文章 0 订阅

前言

很多人不懂原型链的根本原因是不懂原型是什么,为什么会有__proto__,prototype它们指向谁,好复杂,于是我们打算从原型到原型链讲解

原型

什么是原型?任何js对象创建时都会与另一个对象绑定,这个与之绑定的对象就是创建我们对象,所以我们叫他原型,因为它是我们最真实的模样,就像你爸妈和你的关系一样,有其父必有其子

prototype和__proto__

首先我们先来个函数和一个由这个函数创建出来的对象吧:

function Person(){

}
var person = new Person();//{}

我们来看一下Person里面有什么?
在这里插入图片描述
我们会观察到两个我们最关心的东西:proto,prototype

为什么我们使用console.dir打印Person会有__proto__呢?因为dir打印其实就是即将答应的东西的对象打印出来,因为我们都知道程序中万物皆对象,在js中对象都有一个属性:__proto__除了null,null之所以被解析出是object是因为历史遗留性问题,在js之父写js时留下来的

那所有的对象中都有prototype吗?因为我们这里有prototype

我们看一下对象里面有啥:

在这里插入图片描述
阿这,只有一个__proto__,于是我们就得出一个结论:

只有对象才有__proto__,只有函数对象才有prototype

那么此时我们就要来考虑这个对象的__proto__指向的是谁了:

展开看看:

在这里插入图片描述
我们再看看函数的prototype:

在这里插入图片描述
阿这,一模一样

此时我们又得出了一个结论:

对象的__proto__指向创建它的那个函数的prototype

此时我们又发现一个问题,prototype好像也有__proto__,说明函数的prototype其实就是一个对象,并且这个对象由Object的prototype创建

这里我要提一个定理:Object是任何人的祖宗,而Object没有祖宗,如果我们想要看Object的祖宗那么会得到null

这里引入阮一峰老师的博客一文:null更准确的含义是这个东西就不应该存在,可是在我们现有的结构中又必须有这个东西于是我们就用null占位了,他代表这个东西不应该存在

我们得出一张图:

在这里插入图片描述

constructor

我们会发现函数的prototype中有一个属性叫做constructor
在这里插入图片描述
这个construct是什么呢?

我们去测试一下这个代码:

Person === Person.prototype.constructor//true

这就不用多解释了吧?它指向的就是我们Person函数

于是我们又多出了一个画图

在这里插入图片描述

原型链

前面我们提到了person的__proto__指向Person的prototype,Person的prototype的__proto__指向Object的prototype

我们画下图:

在这里插入图片描述

此时我们观察蓝线,那个其实就是所谓的原型链,没错它和作用域链很像,当自己的作用域找不到时他会去找父级的作用域,如果父级有就拿父级的,如果父级没有直到找到Object的原型就不找了,不找了因为未定义所以就返回undefined了

总结

js中对象都有一个属性:__proto__除了null

只有对象才有__proto__,只有函数对象才有prototype

对象的__proto__指向创建它的那个函数的prototype

Object是任何人的祖宗,而Object没有祖宗,如果我们想要看Object的祖宗那么会得到null

以上就是关于原型链的讲解啦,如果有疑问的地方欢迎留言哦,看到都会答的~

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

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值