JavaScript原型&原型链
原型&原型对象
先来一段简单的代码:
function Fun(name) {
this.name = name
}
var obj = new Fun('obj')
JavaScript中的对象都有一个[[Prototype]]内置属性(即部分浏览器实现的__proto__属性),这是一个访问器属性,通过这个可以访问对象的[[Prototype]];对象就是以这个属性为模板,来“继承”方法和属性。
JavaScript中的方法都有一个prototype属性,有一个constructor属性,指向其自身,即Fun.prototype.constructor === Fun。
每个对象的[[Prototype]] 属性都指向创建这个对象的函数的prototype,即Object.getPrototypeOf(obj)=== Fun.prototype
要注意,JavaScript中并没有“类”的概念,创建对象是通过从另外一个对象“复制”而来的,所有对象(不包括通过Object.create(null)创建的对象)都可以看做是从Object.prototype这个对象复制过来的。
严格意义上,JavaScript并没有“构造函数”一说,只有“函数构造器”或者“被构造调用的函数”。JavaScript任何一个函数,都可以通过new关键字调用成为“函数构造器”或者“被构造调用的函数”。
函数本身也是对象,那么函数的__proto__是什么呢?由上文可知,对象的__proto__属性指向创建它的函数的prototype,那么函数这个对象是由谁创建的呢?由new Function()创建的,因此,Fun.proto === Function.prototype
同理,Object.getPrototypeOf(Function) === Function.prototype,因为Function本身就是一个函数,也是由自己创建的。
Object.getPrototypeOf(Object)=== Function.prototype,因为Object也是个函数,由Function创建。
原型链
每个对象都有__proto__属性,指向其原型对象,同时,原型对象也会有自己的__proto__属性,指向上一层的原型对象,如此一层一层的链式结构,最终指向了null,就形成了原型链。
那么,原型链有何作用呢?
前面说过,对象会从它的__proto__中继承属性,这种链式的结构,就实现了“继承”的效果。当访问一个对象的某个属性时,会先在对象自身属性里寻找,如果找不到,则会沿着原型链,一级一级的向上寻找该属性,如果一直找到Object.prototype也没有找到,则认为没有该属性,返回undefined。
也就是说,对象会将它的属性“委托”给其原型所指向的对象,如果没有该属性,则在原型指向的对象上寻找该属性。
tips:如何判断属性是对象自身的还是原型链上的?
用hasOwnProperty()方法即可判断。
JavaScript原型&原型链的更多相关文章
- Javascript的原型链图
90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...
- javascript 之原型、原型链-14
原型 原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性. ...
- javaScript系列 [04]-javaScript的原型链
[04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...
- JavaScript prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- 三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...
- 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)
摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...
- [转]浅谈 JavaScript的原型对象与原型链
看到这篇文章写的很好,转过来以便今后阅读. 原文地址:http://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼 ...
- JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。
回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...
- javascript prototype原型链的原理
javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...
- 浅谈javascript的原型及原型链
浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...
随机推荐
- 解决 INSTALL FAILED CONFLICTING PROVIDER
1.现象: 2.产生原因 INSTALL FAILED CONFLICTING PROVIDER 产生的原因通常是因为系统中已经安装的apk的provider中的authorities相同了,导致在安 ...
- 随笔4 Dictionary<K,V>
本来说是想介绍一下Hashtable的,但是发现HashMap和Hashtable最开始的不同就是在于HashMap继承了AbstractMap,而Hashtable继承了Dictionary< ...
- HTML表单(来自MDN的总结)
表单介绍 HTML表单是用户和web站点或应用程序之间交互的主要内容之一.它们允许用户将数据发送到web站点.大多数情况下,数据被发送到web服务器,但是web页面也可以拦截它自己并使用它. HTML ...
- LYXF-PE-tools
先随便说一下这个PE-tools有什么用? 我开发这款PE-tools是为了学习而开发的,且是开源的,这里我会提供源码链接.它可以解析windows 32/64位程序中比较常用的一些属性. 里面有个稍 ...
- C#中给RICHTEXTBOX加上背景图片
在系统自带的RichTextBox中是无法给它设置背景图片,但是我们在某些场合可能需要给RichTextBox设置背景图片.那么怎么实现这一想法呢?经过研究发现通过其它巧妙的途径可以给RichText ...
- IP释放、更新、以及清除DNS
此篇文章会带您进行DNS释放.更新以及清除步骤,并协助您就解决您网络方面问题.请在下方选择您所使用的操作系统. Windows 8 在桌面按住Windows + X按键. 选择Command Prom ...
- UE4开发PSVR游戏,使用RazorGPU进行调试的方法
打开Project Launcher,如果没有需要的Devkit平台目标,就点下方的Device Manager,右键Claim 相应的目标.如果已经出现在Project Launcher中,点击上方 ...
- xpath进阶
目标: 抓取页面列表信息,并且获取第四个单元格得指定属性 代码: import requests from lxml import etree resp = requests.get('http:// ...
- JavaBean属性和成员变量的区别和联系
JavaBeans是Java中一种特殊的类,可以将多个对象封装到一个对象(bean)中.特点是可序列化,提供无参构造器,提供getter方法和setter方法访问对象的属性.名称中的“Bean”是用于 ...
- matplot在Mac下显示中文的方案
使用matplotlib经常会出现中文显示异常的问题. 网上很多都讲需要下载中文字体包...偶然看到别人发的一种简单的解决放啊.Mac上本身就有支持中文的字体包啊.引入就好了 贴上代码 plt.rcP ...