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属性 只要创建了一个函数,就会为 ...
随机推荐
- eclipse的代码格式化的个性配置
1.安装jdk a. 到http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载对应版本的jdk,安装到自己电脑上. ...
- 重启uwsgi
sudo pkill -f uwsgi -9 uwsgi --ini mysite.uwsgi.ini
- CH5E26 扑克牌 (计数类DP)
$ CH~5E26~\times ~ $ 扑克牌: (计数类DP) $ solution: $ 唉,计数类DP总是这么有套路,就是想不到. 这道题我们首先可以发现牌的花色没有价值,只需要知道每种牌有 ...
- Qt 鼠标悬浮按钮上出现浮窗效果
操作: 鼠标hover于Btn(or other widget),在指定位置显示想要的widget(或其他控件窗口) 方法:重载以下几个api void paintEvent(QPaintEvent ...
- NIO之FileChannel操作示例
1. 写文件操作 /** * 写文件 */ public class FileChannelTest { public static void main(String[] args) throws I ...
- php对象转数组的函数
关于php中想让对象以数组的形式访问,这时候就需要使用到get_object_vars()函数了.先来介绍一下这个函数. 官方文档是这样解释的: 1 array get_object_vars ( o ...
- 第九届ECNU Coder A.足球锦标赛
题目链接:http://acm.ecnu.edu.cn/contest/16/problem/A/ 题目: A. 足球锦标赛 Time limit per test: 2.0 seconds Time ...
- php面试专题---22、网站优化 总结
php面试专题---22.网站优化 总结 一.总结 一句话总结: 主要从前端.后端.数据库.资源四个方面开始发散 前端浏览器缓存和数据压缩前端优化(减少HTTP请求次数) 资源流量优化(防盗链处理)C ...
- fread fwrite文本模式读写回车换行符 自动转换问题
fread 会把\r\n(0d0a)替换为\nfwrite 会把\n替换为\r\n(0d0a),\r\n会变成\r\r\n(0d0d0a) 今天在写一个日志类,用于打印服务程序的信息. 我将每一个日 ...
- python numpy求四分位距
import numpy as np ages=[3,3,6,7,7,10,10,10,11,13,30] lower_q=np.quantile(ages,0.25,interpolation='l ...