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属性 只要创建了一个函数,就会为 ...
随机推荐
- 多组件共享-vuex
1.解决多个组件共享同一状态数据问题1)多个视图共享同一状态2)来自不同视图的触发事件需要变更同一状态文档API:https://vuex.vuejs.org/zh/api/ 2.组件与store连接 ...
- Java数组重修,猜数小游戏改进和打印正三角形
数组重修,猜数小游戏 要求:从键盘输入一个数,判断数组是否包含此数,运用随机数 我们可能会这样写 import java.util.Random; import java.util.Scanner; ...
- 如何修改Pspice元件库中元件的模型参数?
比如下面是我取出的一个稳压管参数....* created using Parts release 7.1p on 11/03/98 * per Microsemi estimate: Trr(est ...
- python语句执行
python文件中的语句,按顺序执行,执行import时,原文件会入栈,等import文件执行完成后,才会出栈执行. load/const.py --- import os DB_ADDRESS = ...
- man arch
ARCH(1) Linux Programmer?. Manual/Linux程序员手册 ARCH(1) NAME/名称 arch - print machine arch ...
- Nginx-常用命令和配置文件
Nginx常用命令 1.启动命令 在/usr/local/nginx/sbin 目录下执行 ./nginx 2.关闭命令 在/usr/local/nginx/sbin 目录下执行 ./nginx s ...
- windows openssh安装
下载地址:https://github.com/PowerShell/Win32-OpenSSH/releases 解压好后打开目录,执行以下命令: powershell.exe -Execution ...
- BZOJ 4180: 字符串计数 后缀自动机 + 矩阵乘法 + 二分(神题)
Description SD有一名神犇叫做Oxer,他觉得字符串的题目都太水了,于是便出了一道题来虐蒟蒻yts1999. 他给出了一个字符串T,字符串T中有且仅有4种字符 'A', 'B', 'C ...
- BZOJ 4804: 欧拉心算 欧拉函数
Description 给出一个数字N Input 第一行为一个正整数T,表示数据组数. 接下来T行为询问,每行包含一个正整数N. T<=5000,N<=10^7 题解: 求 $\sum_ ...
- [CSP-S模拟测试]:可爱的精灵宝贝(搜索)
题目描述 $Branimirko$是一个对可爱精灵宝贝十分痴迷的玩家.最近,他闲得没事组织了一场捉精灵的游戏.游戏在一条街道上举行,街道上一侧有一排房子,从左到右房子标号由$1$到$n$.刚开始玩家在 ...