在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环。今天我分享一下我对javascript原型和原型链的理解。

 一、对象等级划分

  我们认为在javascript任何值或变量都是对象,但是我还需要将javascript中的对象分为一下几个等级。

  首先Object是顶级公民,这个应该毋庸置疑,因为所有的对象都是间接或直接的通过它衍生的。Function是一等公民,下面会做解释。几个像String,Array,Date,Number,Boolean,Math等内建对象是二等公民。剩下的则都是低级公民。

  二、原型prototype

  首先prototype是一个属性,同时它本身也是一个对象。那么哪些是具有prototype这个属性呢?其实javascript中所有的函数都有prototype这个属性,反过来所有具有prototype的对象本身也是一个函数,没错就是一个函数。

  第一条我不再印证,主要看看第二条。大家都知道Object,Array,Date都有prototype,他们是函数吗?是的他们也是函数的一种,为什么这么说呢?我们在定义一个对象或者数组时,是不是可以这么做var o = new Object(),a = new Array()。学过java的人都知道new是用实例化一个对象的方法,但是我们都知道javascript中不存在真正的类的概念,所以只能用函数来模拟,那么既然可以有上面的做法也就印证了Object和Array也是特殊的函数。

  其实上面说到的几等公民基本都是函数的一种,除了Math这个工具对象外,应该没有见过这种new Math()这种写法吧!当然这种写法也是会报错的,所以在访问Math.prototype返回的也是undefined。

  三、__proto__和原型链

  __proto__是一个指针,它指的是构造它的对象的对象的prototype,听起来有的拗口。举个例子吧!

  

  如上面代码,o是Object的一个实例,所以o的__proto__指针指向构造o的Object的prototype。这样的意义在于o可以使用Object.prototype里面的方法,例如toString(),o在访问toString方法时,首先会在自身寻找,如果没有找到则会在__proto__也就是Object.prototype上面查找。

  可以说几乎所有的javascript对象都有__proto__这样一个指针包括Object,我们来看一看

  

  其实a = 1就相当于a = new Number(1)。可以看到所有的内建对象以及Object的__proto__指向的都是一个匿名函数,也就可以认为它们其实也是function的一个实例,所以之前会说function是一等公民。

  那么原型链到底是什么呢?我们展开a.__proto__也就是Number.prototype对象,它是没有toString()的方法的,但是对于a来说它其实是可以调用toString的方法的,这就是原型链的作用。看下面代码

  

  看上面代码和结果,我们沿着a的__proto__一直访问会到达Object的prototype,也就是说a调用toString方法最终其实是访问Object.prototype的toString方法。那么a的原型链就是由Number.prototype和Object.prototype组成,当a访问一个方法或属性时,它会先在自身查找,然后再沿原型链找,找到则调用,没找到报错。为了印证这一点,我们在Number.prototype上面加一个toString的方法。

  

  可以看到a调用的是Number.prototype的toString方法,在找到之后就停止。在javascript中,几乎所有的对象的原型链的终点都是Object.prototype 

  总结

  __proto__是实现原型链的关键,而prototype则是原型链的组成。最后附上一张稍微复杂的原型链和构造函数的关系图,有兴趣可以研究一下。

  

深入理解javascript原型链的更多相关文章

  1. 再次理解JavaScript原型链和匿名函数

    <!--------------------------------------------- 1.演示匿名加载 2.js单进程执行流 3.原型链理解 a.__proto__:属性每个对象都有 ...

  2. 简单理解JavaScript原型链

    简单理解原型链 什么是原型 ? 我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象,这个对象就是我们常说的原型对象,每一个对象都会从原型"继承" ...

  3. 简单粗暴地理解 JavaScript 原型链 (一个充满歪门邪理的理解方法,有助于新手哦!)

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  4. 好文要顶之 --- 简单粗暴地理解 JavaScript 原型链

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  5. 简单粗暴地理解 JavaScript 原型链

    尼玛!你特么也是够了! Don’t BB! Show me the code! function Person (name) { this.name = name; } function Mother ...

  6. 三张图理解JavaScript原型链

  7. 深入理解javascript原型和闭包(14)——从【自由变量】到【作用域链】

    先解释一下什么是“自由变量”. 在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量.如下图 如上程序中,在调用fn()函数时,函数体中第6 ...

  8. 深入理解javascript原型和闭包 (转)

    该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...

  9. 深入理解javascript原型和闭包系列

    从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...

随机推荐

  1. BZOJ5299:[CQOI2018]解锁屏幕(状压DP)

    Description 使用过Android手机的同学一定对手势解锁屏幕不陌生.Android的解锁屏幕由3x3个点组成,手指在屏幕上画一条 线将其中一些点连接起来,即可构成一个解锁图案.如下面三个例 ...

  2. 使用Timer组件_实现定时更改窗体颜色

    1 向窗体拖入Timer组件 2 更改其Enable属性为true 3 其interval属性为300 4 在Tick事件中写入随机变色代码 private void timer1_Tick(obje ...

  3. Telnet配置

    一.环境 路由 IP:192.168.56.2 本地云 IP:192.168.56.1 二.认证模式 AAA模式 认证 授权 计费的安全技术 当配置用户界面的认证方式为AAA时, 用户登录设备时需要首 ...

  4. POJ 1328 Radar Installation(很新颖的贪心,区间贪心)

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 106491   Accepted: 2 ...

  5. NSArray中地内存管理 理解

    问题: 通过alloc和init的方法创建了NSArray和NSDictionary,然后通过addobject和setobject:forkey:将object添加进去.通过addobject会自动 ...

  6. mysql 使用order by

    1.mysql 使用order by field() 自定义排序 order by field(value,str1,str2,str3,str4......strn) 例如:select * fro ...

  7. #leetcode刷题之路15-三数之和

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三元组. ...

  8. LightOJ 1203--Guarding Bananas(二维凸包+内角计算)

    1203 - Guarding Bananas    PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 32 M ...

  9. Zabbix——设置阈值和报警

    前提条件: Zabbix 服务器可以正常监控其他设备 Zbbix 已经配置完成了邮件报警 Zabbix server版本为4.0 配置ICMP监测,1分钟如果ping不通,将会发送邮件 找到Templ ...

  10. Cobbler实现自动化安装(上)--原理篇

    了解Cobbler之前,我们需要先对PXE及KickStart有一定的认识. PXE PXE(Pre-bootExecution Environment),预启动执行环境,通过网络接口启动计算机,支持 ...