javaScript(原型链)
在了解javaScript的原型链之前,我们得先来看一下原型是什么。
在javaScript中,所有的函数都会有着一个特别属性:prototype(显示原型属性);当我们运行如下代码时:
function Fn(){
}
在内存中则是如下这样工作的:

我们可以看到,当function对象创建时,其会有一个属性:prototype,该属性在定义函数的时候被自动赋值,值默认为:{},即:指向堆空间中的空的object对象,而该object空对象即是此function的原型对象。
在函数实例化对象时,所有的实例化对象也会有一个特别的属性:__proto__(隐式原型属性),继续刚才的例子,我们运行如下代码:
function Fn(){
}
var fn=new Fn();
此时内存中是如下状况:

此时有没有发现function对象的显示原型属性与其实例化得到的对象的隐式原型属性的值是相同的,即它们指向同一个对象——空object(function的原型对象)。
下面我们来说下显示原型属性与隐式原型属性的关系。
在function实例化对象时,在其实例化对象内部相当于自动运行了如下代码:
var fn=new Fn(); //fn内部:this.__ptoto__=Fn.prototype
我们可以通过如下代码来判断显示原型属性与隐式原型属性是否相等:
function Fn(){
}
var fn=new Fn(); //fn内部:this.__ptoto__=Fn.prototype
console.log(fn.__proto__===Fn.prototype);
运行上述代码会输出:true,这说明显示原型属性与隐式原型属性确实相等。
由此我们可以总结:函数实例化对象的隐式原型属性等于其构造函数的显示原型属性。
了解过原型之后,我们来看一下原型链。
先来看一张图:

那么这个空的object对象是不是一个实例化对象呢,如果是的话,它的构造函数又是谁呢?
在回答上述问题之前我们先来看一个新的属性:constructor;
这个属性与prototype作用类似,不过不同的是:prototype是function对象指向它对应的原型对象,而constructor则是原型对象指向其对应的function对象。
举个例子:
function Fn(){
}
var fn=new Fn(); //fn内部:this.__ptoto__=Fn.prototype
console.log(fn.__proto__.constructor);
若我们运行上述代码,则会得到如下结果:


通过这个例子我们可以知道:Fn的实例化对象fn可以通过fn.__proto__.constructor来得到自身的构造函数。
它的原理也很简单,由前面我们可以知道,fn.__proto__===Fn.prototype是成立的,所以可以通过fn.__ptoto__来得到Fn的原型对象,然后再使用constructor来得到与该原型相对应的function函数,即:Fn。
再回到前面的问题上,我们同样可以通过上述方法来获得object的构造函数。
即执行:
function Fn(){
}
var fn=new Fn(); //fn内部:this.__ptoto__=Fn.prototype
console.log(Fn.prototype.__proto__.constructor);
其输出结果如下:

我们可以看到,object空对象的构造函数是Object。
那么问题又来了,我们知道:函数实例化对象的隐式原型属性等于其构造函数的显示原型属性。
这个object空对象的构造函数既然是Object,那么object应该也通过__ptoto__来指向一个原型对象。
即:

那么Object函数原型对象的隐式原型又指向谁呢?
我们来看一下:
function Fn(){
}
var fn=new Fn(); //fn内部:this.__ptoto__=Fn.prototype
console.log("输出结果为:"+Fn.prototype.__proto__.__proto__);

由此可以知道:Object函数原型对象的隐式原型不再指向其他对象,即:

当我们运行如下代码时:
function Fn(){
}
var fn=new Fn(); //fn内部:this.__ptoto__=Fn.prototype
Object.prototype.name='mmzkyl';
console.log("输出结果为:"+fn.name);
会得到如下输出:

我们可以很明显看到,上述代码并没有在Fn内部定义任何东西,但是fn.name确实又输出了:mmzkyl。
这里来解释一下,当查找对象内部属性的属性/方法时,JavaScript引擎会自动沿着如下图所示来进行查找:

JavaScript会先在自身查找目标属性/方法,若是没有查找到则会沿着其隐式原型属性渠道原型对象中寻找,若是找到了则返回该值,若是还没有找到,则继续沿着隐式原型属性寻找,若是一直找到了Object函数原型对象还是没有找到,则会返回undefined。
这个寻找的过程类似与一条链,而这也称为原型链。
javaScript(原型链)的更多相关文章
- JavaScript学习总结(十七)——Javascript原型链的原理
一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...
- javascript原型链中 this 的指向
为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...
- 明白JavaScript原型链和JavaScrip继承
原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...
- Javascript 原型链资料收集
Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-proto ...
- 资料--JavaScript原型链
JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...
- JavaScript原型链:prototype与__proto__
title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...
- JavaScript原型链及其污染
JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...
- 图解Javascript原型链
本文尝试阐述Js中原型(prototype).原型链(prototype chain)等概念及其作用机制.上一篇文章(图解Javascript上下文与作用域)介绍了Js中变量作用域的相关概念,实际上关 ...
- 画一画javascript原型链
在javascript中,几种数据类型String,Number,Boolean,Object,Function都是函数,可称之为函数对象. 可以说拥有prototype属性的都是函数. 所有对象都拥 ...
- JavaScript原型链和instanceof运算符的暧昧关系
时间回到两个月前,简单地理了理原型链.prototype以及__proto__之间的乱七八糟的关系,同时也简单了解了下typeof和instanceof两个运算符,但是,anyway,试试以下两题: ...
随机推荐
- Fabric的6大特性
文章目录 什么是Hyperledger Fabric 1. 成员准入 2. 性能,可伸缩性和信任级别 3 需要了解的数据 4 通过不可变的分布式账本进行复杂查询 5 支持插件组件的模块化架构 6 保护 ...
- poj_2393 Yogurt factory 贪心
Yogurt factory Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16669 Accepted: 8176 D ...
- Pytorch中自定义神经网络卷积核权重
1. 自定义神经网络卷积核权重 神经网络被深度学习者深深喜爱,究其原因之一是神经网络的便利性,使用者只需要根据自己的需求像搭积木一样搭建神经网络框架即可,搭建过程中我们只需要考虑卷积核的尺寸,输入输出 ...
- 【三剑客】awk函数
1. 内置函数 awk的内置函数有算术.字符串.时间.位操作和其它杂项的函数. 1.1 算术函数 atan2(y,x) 返回弧度的反正切(y/x) cos(expr) 返回expr的余弦(以弧度形 ...
- confluence+jira
/opt/atlassian/confluence/confluence/WEB-INF/lib mysql-connector-java-5.1.7-bin.jar atlassian-extras ...
- 基于HTML Canvas实现“指纹识别”技术
https://browserleaks.com/canvas 说明所谓指纹识别是指为每个设备标识唯一标识符(以下简称UUID).诸如移动原生的APP都可以通过调用相关设备API来获取相应的UUID. ...
- ACM学习总结 6月11日
经过这几天没有队友的协助,又是算法题比较多,有点碰触到自己的短板,因为搜索的题目就做了1个,一遇到搜索就跳过,DP也有点忘得差不多了,四边形优化,斜率优化还不会,这是下一阶段努力方向,把之前做过的题, ...
- 重新认识 Spring IOC
spring IOC 剖析 再品IOC与DI IOC(Inversion of Control) 控制反转:所谓控制反转,就是把原先我们代码里面需要实现的对象创 建.依赖的代码,反转给容器来帮忙实现. ...
- Eugene and an array(边界麻烦的模拟)
一道看似小学生的题,搞了我几个小时...... 首先思路就有两种: \(Ⅰ.找和为0的bad子串,再用n*(n+1)/2-bad子串得到答案\) \(Ⅱ.找和不为0的good子串\) 如果你选择找ba ...
- spring学习笔记(五)自定义spring-boot-starter(1)
在我们开始定义之前我们应该知道springBoot的大致运行原理,我们从springBoot启动类开始.首先我们看下这个注解,@SpringBootApplication,跟进去可以看到如下代码: @ ...