彻底深刻理解js原型链之prototype,__proto__以及constructor(二)-阿里云开发者社区

开发者社区> 宜信技术学院> 正文

彻底深刻理解js原型链之prototype,__proto__以及constructor(二)

简介: 这篇教程主要目的对原型链概念进一步加深理解
+关注继续查看

前言

如果你能够啃下教程一并且吃透原型链的几个概念的话说明你在前端飞仙的路上又进了一小步···学习最怕的不是慢而是站!这篇教程主要目的对原型链概念进一步加深理解

巩固下教程一的知识

来看下面的例子:

var text=new String("我是文字");
function Persion(name,job){
    this.name=name;
    this.job=job;
}
Persion.myName="lxm";
Persion.prototype.sayName=function(){
    alert(this.name);
}
var perison1=new Persion("lxm","20")

思考:判断下列表达式返回的值:

(两分钟之内对八道的算及格,剩下的同学回头接着理解教程一,传送门在此 [http://0313.name/2017/01/13/prototype-proto-constructor.html]

perison1.__proto__===Persion.prototype;
perison1.name===Persion.name;
perison1.prototype.__proto__===Object.prototype;
Persion.prototype.__proto__===Object.prototype;
Persion.__proto__===Function.prototype;
Persion.constructor===perison1;
Function.__proto__===Object.prototype;
Function.prototype.__proto__===Object.prototype;
typeof Persion.prototype;
typeof Function.prototype;

原型链图

这个图绝对是网络上独一无二独一份,此乃小米飞升教程独家秘籍!因为博主在学习过程中发现对文字的理解和记忆远远不如一个图来的更深更直观,更加透彻,为了您更好的学习原型链,博主特意花了一上午的时间用mermaid绘制了这个原型链的关系图,而且通过这个图我们能够发现很多有意思的事情
为了关系图更加直观和清晰,隐去了一些引用线路,其中:

  • 圆形代表对象的名字
  • 方形代表属性名
  • 实线代表对象的分界
  • 虚线代表引用
  • 菱形代表基本值

git

  1. 原型链是单链,只往一个方向流向,没有回路
  2. 只有Function的__proto__指向自己的prototype,这也向我们解释了为什么Function.prototype类型是function
  3. 我们通过__proto__只能获取到原型对象中的方法和属性,所以persion1通过原型链是获取不到Persion的myName属性,但是我们可以通过原型对象的constructor来获取或者修改Persion的属性(这点太给力了)

请注意,有时候这个方法也不好使,因为原型对象的constructor是可以改变的,不一定指向原型对象所在的函数对象

继续上面的例子:

persion1.__proto__.constructor.myName="我变了耶!";
console.log(Persion.myName); //我变了耶
  1. 普通对象的_proto__一定指向创造它的函数对象的prototype
  2. 原型对象的__proto__一定指向Object.prototype!
  3. 通过图我们可以简单理解,拥有原型对象属性的对象是函数对象,否则为普通对象
  4. 原型链是有开始和尽头的,开始于null,结束于普通对象
  5. 所有的函数对象都是Function以new的方式创造出来了,包括Function自己且每个函数对象的__proto__都指向了Function.prototype
  6. Object是所有对象的父类,我们也可以称之为基类,不过不要纠结于叫什么,因为我们通过图可以看到每一个对象(不管是原型对象还是普通对象还是函数对象)的通过原型链都可以引向Object.prototype

以上九条我称为原型链之九句真言(不要太在意名字,我自己随便起的 ~)

意外收获:this.name和this.job难道不应该在Persion中也有一份吗?无数个日夜,愚笨的博主对this的用法都不甚了解,直到我画出了这种图,我tm彻底明白了this的含义,就是谁运行包含this的这个函数,this就把挂在它身上的包袱(属性)甩给谁!

看到了吗,persion1调用了Persion,那么自然多了2个属性,但是注意,name跟job并不是Persion的属性!!

思考:图中没有画出Object.__proto__的指向,请问他指向哪?(请只依据九句真言解答)

思考题解答

思考:判断下列表达式返回的值:

perison1.__proto__===Persion.prototype;

首先判断perison1是通过new方式被Persion创造出来的,依据九句真言第4条得出 :true

perison1.name===Persion.name;

通过关系图可以看到不相等,我已经在意外收获中解答了,答案为:false

perison1.prototype.__proto__===Object.prototype;

只看图可以看到perison1没有prototype,是普通对象所以答案为:js报错~~

Persion.prototype.__proto__===Object.prototype;

参考九句真言第5条:答案为:true

Persion.__proto__===Function.prototype;

Persion为函数对象,参考九句真言第8条,答案为:true

Persion.constructor===perison1;

Persion是由Function创造出来的所以Persion.constructor指向Function,答案为:false

Function.__proto__===Object.prototype;

Function我们已经反复强调是由自身创造所以Function.__proto__===Function.prototype;,答案为:false

Function.prototype.__proto__===Object.prototype;

根据九句真言第5条,答案为:true

typeof Persion.prototype;

答案为:object

typeof Function.prototype;

答案为:function,注意这个是比较特殊的原型对象

思考:图中没有画出Object.__proto__的指向,请问他指向哪?(请只依据九句真言解答)

下面来分步解答

  1. Object属于函数对象
  2. 依据九句真言第八条得出函数对象的__proto__都指向了Function.prototype
  3. 所以Object.__proto__===Function.prototype

这一点是不太好理解的,是Function创造了Object,然后Object创造了Function的原型对象prototype
所以就有了

Object.__proto__===Function.prototype
Function.prototype.__proto__===Object.prototype

不要太纠结于此,只要理解就好

结束语

好了,原型链的概念原理通过这2篇教程我相信大家已经滚瓜烂熟了!下面的教程,我们会着重研究下原型链在实际的应用!

作者:宜信技术学院 刘晓敏

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9494 0
理解js中的原型链,prototype与__proto__的关系
    首先,要明确几个点: 1.在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。
877 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13177 0
彻底深刻理解js原型链之prototype,__proto__以及constructor(二)
这篇教程主要目的对原型链概念进一步加深理解
223 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11507 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4012 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21907 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6891 0
+关注
宜信技术学院
宜信技术学院是宜信旗下的金融科技能力展示与输出平台。通过分享在金融科技领域的开源成果、研发实践促进金融科技生态圈企业创新升级。
129
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载