web前端:理解js原型链

2020-11-12 阅读 夏应艳整理

内容简介:javascript01、学习原型链之前我们先认识一下构造函数,代码如下:functionS(){this.name='xxx';this....

01、学习原型链之前我们先认识一下构造函数,代码如下:

functionS(){
this.name='xxx';
this.say=function(){console.log(this.name)}
}
vars1=newS();

其中,s1是S的实例,s1的__proto__(大家先不用管__proto__属性,后续会讲到)中有一个constructor(构造函数)属性,该属性指向S。
在这里,大家可以记住两点:
1.s1是构造函数S的实例;
2.s1.__proto__.constructor===S也可以写成s1.constructor===S;

02、接下来我们来看下一段代码:

functionS2(){}
S2.prototype.name='XXX';
S2.prototype.say=function(){
console.log(this.name);
}

vars2=newS2();
vars3=newS2();
console.log(s2.sayName===s3.sayName);//true
console.log(s2.__proto__===S2.prototype);//true

这一段代码中我们可以看到一个新属性——prototype,这是什么呢,其实这就是构造函数S2的原型对象,每个对象都有__proto__属性,但是只有函数对象才有prototype属性。而s2是构造函数S2的实例,而s2.__proto__指向的就是S2的原型对象,即s2.__proto__===S2.prototype。得到一个结论,实例的__proto__属性指向的就是其构造函数的原型对象。

03、继续上一步的代码,我们添加代码继续调试:

console.log(s2.__proto__);//返回S2的原型对象
console.log(S2.prototype);//返回S2的原型对象

console.log(s2.__proto__.__proto__);//返回Object对象
console.log(S2.prototype.__proto__);//返回Object对象

console.log(s2.__proto__.__proto__.__proto__);//返回null
console.log(S2.prototype.__proto__.__proto__);//返回null

其实,S2的原型对象上还有原型对象,因为S2的原型对象也相当于只是Object对象的一个实例。

04、在这里我给大家画了一张图,便于大家理解原型链。

作者给您推荐的内容
  1. 怎么自己重装系统win7很多人会用U盘来安装系统。现在网民想用ghost win7u磁盘来安装教程和重建他们的计算机系统。但他们只知道教程,但仍不能操作很多教程。现在让小编告诉你鬼wiw...

  2. 我们经常在计算机上使用WPS来处理文件。有些文档是文本形式,有些是表格形式,我们经常需要转换这两种形式。那么我们如何在WPS文档上怎么在电脑WPS文档上设置文字和表格的互转设置文本和表...

  3. 相信大家都知道怎么给照片添加滤镜,那视频怎么添加滤镜呢?其实视频添加滤镜的效果和照片是一样的,会让视频变得更加独特具有一种别样的风格。那么,下面就让我们一起来学习视频怎么添...

  4. 现在手机的功能是越来越强大,电脑可以做的事情手机现在基本上都可以,接下来我们来讲一讲手机如何玩网页游戏。01、现在的手机基本上有两个系统一个是苹果系统,一个是安卓系统。想要手机...

  5. 高手教你举证加班uac是一个程序,需要您的授权才能运行时,您运行一些软件。那么如何关闭uac呢?我相信很多朋友不清楚如何关闭UAC,他们也不太注意这个问题。事实上,关闭uac非教...

  6. 今天小编要和大家分享的是wps表格怎么打印预览,希望能够帮助到大家。01、首先在我们的电脑桌面上新建一个WPS表格并点击它,如下图所示。02、然后随便输入一些内容,如下图所示。03、接着点...

  7. ppt图片放大再还原PPT如何放大图片1,打开PowerPoint软件,这里作为2007版的演示,界面如下,不同版本的操作可能不同。如何缩小ppt中的图片...

  8. 笔记本如何连接宽带呢?很多人都不知道,下面小编来告诉大家。01、首先,我们点击电脑左下角的微软按钮,弹出的界面,我们点击设置;02、进入设置后,我们点击网络和Internet;0...

  9. 1在微博上点击我的手机,新浪微博如何解除支付宝绑定?点击支付,释放绑定!...

  10. 数位板,又名绘图板、绘画板、手绘板等等,是计算机输入设备的一种。接下来我们一起来看一下如何下载和安装Wacom驱动。01、首先我们在浏览器中输入“数位板wacom”,点击进入官网,如下图所...