图解原型链(初识篇)
来源:互联网 发布:c语言char 编辑:程序博客网 时间:2024/06/05 05:06
前言
众所周知在js中分Undefined
、Null
、Boolean
、Number
和String
五种基本数据类型和一种复杂数据类型Object,基本数据类型因为大小固定的关系,在栈内存中按值存放,复杂数据类型在栈中保存的是一个指针变量,指向堆内存中的某个对象。
接下来是本文的重点,探讨复杂数据类型在js中的关系。
Function和Object
在程序员的世界,万物皆对象,在js中又以函数作为一等公民,也就是说在js的世界中对象往往是以函数的形式存在,没错,Object也是函数Function。
如果说Function instanceof Object为true还可以理解的话,那Object instanceof Function为true又是怎么回事?
画得不好请见谅,可以沿着紫红色的箭头一直走到null对象,这也是原型链的顶端。
如果新来的同学对prototype和__proto__不够了解的话,记住下面这句话:
prototype
说的是构造函数和原型对象之间的关系,__proto__
说的是实例对象和原型对象之间的关系。
验证如下:
蓝色箭头同理,只不过把__proto__换成constructor,大家可以自己打开浏览器F12尝试一下。
var xiaoming = {
name: "xiaoming",
age: 12,
score: 100,
say: function() {
console.log("我妈常说我考满分!")
}
}
当我们用上面的方式自面量声明时,就隐式创建了一个Object对象小明同学,他有一个say函数和几个属性,创建好之后关系如下:
验证如下:
总结
比较绕的地方应该就是Object与Function的关系,还记得那句话吗?
prototype
说的是构造函数和原型对象之间的关系,__proto__
说的是实例对象和原型对象之间的关系。
因为函数既是函数又是对象,声明的函数与声明的非函数对象关系已经在最后部分展示了,前提是原型链和constructor对象都没有发生改变。
因为本文暂时没有涉及原型链指向的改变和new构造函数,所以讨论的关系还比较简单,希望认真读完的你有所收获!
- 图解原型链(初识篇)
- 图解原型原型链
- 图解Javascript原型链
- 图解Javascript原型链
- 图解Javascript原型链
- JS原型链图解
- 原型链图解
- 图解原型链
- javascript原型链初识
- Javascript原型和原型链图解
- 图解js原型对象、原型链
- 图解原型
- JavaScript学习系列之初识原型继承和原型链
- 原型链模式图解1 .2 .5
- 原型链及作用域知识图解
- 再谈原型链,深刻理解原型及原型链(案例分析,详细图解,一目了然)
- 初识原型图
- 完整原型链详细图解(构造函数、原型、实例化对象)
- 选择排序(java实现)
- 2017.10.9 放棋子 思考记录
- NullPointerException 与 Java 自动装箱拆箱机制
- IDA动态调试Android的DEX文件
- RMAN-08137
- 图解原型链(初识篇)
- JavaScript 表单处理
- 欢迎使用CSDN-markdown编辑器
- java实现导出Excel
- Angular2 图片URL自解码
- 一名资深吃货,如何玩转云计算?
- Android Camera开发(一)之基础知识
- (三)微服务-整个架构的代码结构
- IP头、TCP头、UDP头详解以及定义