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属性 只要创建了一个函数,就会为 ...
随机推荐
- sed \s
export m1=`free|cut -d ":" -f2|sed -e "s/^\s\s*//g"|head -2|tail -1|cut -d ' ' - ...
- 揭示编译器API
编译器管道功能区 .NET编译器平台(“Roslyn”)通过提供一个API层,是一个传统编译器管道镜像,向你这样的消费者揭示了C#和Visual Basic编译器的代码分析. 这条管道的每一部分,现在 ...
- Ts 的类
TS 中的公共.私有和受保护的修饰符: 1.public表示公共的,用来指定在创建实例后可以通过实例访问的,也就是类定义的外部可以访问的属性和方法.默认是 public 2.private修饰符表示私 ...
- Kettle连接MySQL错误:OPTION SQL_SELECT_LIMIT=DEFAULT
由于升级了MySQL到5.6,运行ETL报错: OPTION SQL_SELECT_LIMIT=DEFAULT 上网查询原来是MySQL的驱动版本不一致,之前的驱动不支持这样的写法,于是上网下载对应的 ...
- R语言里面的循环变量
for (i in 1:10) { print("Hello world") } 以上这条命令执行完之后,变量i会被保存下来!并且,i的值将是10. 程序中有多处循环的时候要非常注 ...
- Clean Docker <none>:<none>
https://www.projectatomic.io/blog/2015/07/what-are-docker-none-none-images/ Reference: https://www.p ...
- SQL Server 中用While循环替代游标Cursor的解决方案
在编写SQL批处理或存储过程代码的过程中,经常会碰到有些业务逻辑的处理,需要对满足条件的数据记录逐行进行处理,这个时候,大家首先想到的方案大部分是用“游标”进行处理. 举个例子,在订单管理系统中,客服 ...
- php array_sum()函数 语法
php array_sum()函数 语法 作用:返回数组中所有值的和.大理石构件价格 语法:array_sum(arra) 参数: 参数 描述 array 必需.规定数组. 说明:如果所有值都是整数 ...
- tensorflow2.0 squeeze出错
用tf.keras写了自定义层,但在调用自定义层的时候总是报错,找了好久才发现问题所在,所以记下此问题. 问题代码 u=tf.squeeze(tf.expand_dims(tf.expand_dims ...
- Web截屏插件
官方网站:http://www.ncmem.com 官方博客:http://www.cnblogs.com/xproer 产品首页:http://www.ncmem.com/webplug/scppr ...