细心看完这篇文章,刷新对Javascript Prototype的理解
var person={name:'ninja'};
person.prototype.sayName=function(){
return this.name;
}
分析上面这段代码,看看有没有问题?
没错,这段代码是有问题的,我们可以通过Chrome看一下执行结果:
错误提示说找不到sayName 属性,不是记得说Javascript可以随时新增属性的吗?没错,Javascript确实可以添加属性,但是不是针对对象实例本身的,而是针对其对实例对象所属的类型的对象的。是不是听起来有些别扭,没错,在Javascript的世界里,一切皆是对象,在其所属类型的对象里含有一个prototype的属性(这个prototype属性其实也是一个对象),而在类型的对象的实例的对象里,也存在一个__proto__的属性,这个属性其实可以理解为是prototype的一个引用。
这样说起来是不是有些难于理解,好的,那让我们重新整理一下上面的例子:
var Person=function(name){
this.name=name;
}; Person.prototype.sayName=function(){
return this.name;
}; var a_person=new Person('ninja');
var name=a_person.sayName();
在这个例子里Person就是类型的对象,a_person就是该类型对象的一个实例对象
现在我们在看一下这两个对象里属性的具体情况。
- 类型对象Person:在其中有一个属性prototype:Object,它是一个对象,其下面有一个Constructor的属性,对应的其实也就是当时定义该类型时候所写的function签名,也就是说这个Constructor其实是一个function类型,可以尝试用 typeof(Person.Constructor)测试一下,它的结果返回的是“function”.
- Person的实例对象a_person,下面有一个_proto_的属性,其实它也就是类型对象实例里prototype的一个引用,可以使用这样的代码去验证“Person.prototype===a_person.__proto__”,发现其结果返回的是true, 也许你会注意到在__proto__下面的属性里还有一个__proto__,这个其实就是link到了Object.Prototype了,这也就是常说的原型链的概念。
PS:
也许很多人会分不清在Javascript里面大写的Function和小写的function的区别。
其实仔细分析一下代码,也不难发现,Function其实就是所有function的所属类型的一个对象。
是不是还是很拗口,其实原理也和上面一样,只不过这个Function的类型是Javascript自己定义的而已,来看一下代码吧:
从上面的截图中可以看出在prototype中已经定义了我们常常见到的一些方法appy,bind,call.
下面我们定义一个匿名方法,其实也就是Function的一个实例对象
我们看一下具体的构造:
发现了吧,它的__proto__其实就是Function里的引用:
细心的朋友应该会发现,当我们定义一个function类型对象后,展开它的属性我们会会看到两个prototype的相关的属性,一个是__proto__,另外一个是prototype;
正如前面所说__proto__是Function的prototype的引用;prototype是该类型对象本身的一个引用。
不知道读这篇文章的你是否搞明白了,我想我是已经明白了:)
细心看完这篇文章,刷新对Javascript Prototype的理解的更多相关文章
- [转帖]看完这篇文章你还敢说你懂JVM吗?
看完这篇文章你还敢说你懂JVM吗? 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用 ...
- APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了
APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了 彻底理解android中的内部存储与外部存储 存储在内部还是外部 所有的Android设备均有两个文件存储区域:"intern ...
- [转帖]看完这篇文章,我奶奶都懂了https的原理
看完这篇文章,我奶奶都懂了https的原理 http://www.17coding.info/article/22 非对称算法 以及 CA证书 公钥 核心是 大的质数不一分解 还有 就是 椭圆曲线算法 ...
- 如果你每次面试前都要去背一篇Spring中Bean的生命周期,请看完这篇文章
前言 当你准备去复习Spring中Bean的生命周期的时候,这个时候你开始上网找资料,很大概率会看到下面这张图: 先不论这张图上是否全面,但是就说这张图吧,你是不是背了又忘,忘了又背? 究其原因在于, ...
- Python正则表达式,看完这篇文章就够了...#华为云·寻找黑马程序员#【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 看完这篇文章你就可以告诉领导你精通Zookeeper了
一.Zookeeper概述 1.概述 Zookeeper 是一个开源的为分布式框架提供协调服务的 Apache 项目.在分布式系统中,扮演注册中心的角色. Zookeeper数据模型的结构与Linux ...
- 【转】APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了
只要是需要进行联网获取数据的APP,那么不管是版本更新,还是图片缓存,都会在本地产生缓存文件.那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢? ...
- 看完这篇文章,我奶奶都懂了https的原理
本文在个人技术博客同步发布,详情可猛戳 亦可扫描屏幕右方二维码关注个人公众号 Http存在的问题 上过网的朋友都知道,网络是非常不安全的.尤其是公共场所很多免费的wifi,或许只是攻击者的一个诱饵 ...
- 看完这篇文章才对【GIT】有了大彻大悟的认识
git定义:版本管理工具 历史:没有git的时候,我们修改完一个文件,要先把文件拷贝一个副本到备份文件夹中,还要建个文档来记录当前文件的信息和操作记录.当文件多的时候,人工操作起来将是个非常辛苦非常庞 ...
随机推荐
- Mac下使用Automator实现隐藏和显示
本文使用Makdown编辑 通常系统中打开一个文件有好多种方法,编辑也是.例如你要打开OmniGraffle来画个图(suppose you are working on the Mac OS X) ...
- vmdk虚拟机转换为OVF模板,导入esxi
VMware WorkStation安装目录下,有一个OVFTool文件夹,例如我电脑上的路径为:D:\VMware\VMware\OVFTool.通过CMD进入到命令行模式,更改到该目录下,运行如下 ...
- Java中Synchronized的用法
原文:http://blog.csdn.net/luoweifu/article/details/46613015 作者:luoweifu 转载请标名出处 <编程思想之多线程与多进程(1)——以 ...
- NSAssert用法
今天突然发现了一个开发ios程序时调试的好帮手-NSAssert()函数.而且和NSLog()函数一样简单易用,代码如下: NSAssert(x!=0,@"x must not be zer ...
- Houdini Krakatoa Render Plugin
HDK真实个混蛋,都懒得写个解释.凭着函数英文意思猜测.. plugin sample video: 在极其残忍的开发环境,"Particle Voxel Render" 产生了( ...
- xtjh
<div onkeydown="javascript:if(event.keyCode==13) search()"> <br > ISBN<span ...
- 深入浅出Java垃圾回收机制
JVM学习笔记 JVM内存管理和JVM垃圾回收 JVM内存组成结构 JVM内存结构由堆.栈.本地方法栈.方法区等部分组成,结构图如下所示: 1)堆 所有通过new创建的对象的内存都在堆中分配,其大小可 ...
- layer
一款实用的web提示框架!下面是实用这款框架的实例 html代码 <p class='layer_notice'>我们是否是好惹的</p> <input type=&qu ...
- Windows下Apache+mod_python+Django配置
Windows下Apache+mod_python+Django配置 Apache 首先要安装Apache,我安装的版本是2.2.*: Python python肯定是要安装的,我安装的版本是2.5的 ...
- 在IE6下使用filter设置png背景
今天帮别人解决问题学会了一个在IE6下使用filter设置png背景,具体css写法如下: .login_form_wrap { width: 778px; height: 360px; backgr ...