个人对JS原型链的一些理解(prototype、__proto__)
前言
在我一开始学习java web的时候,对JS就一直抱着一种只是简单用用的心态,于是并没有一步一步地去学习,当时认为用法与java类似,但是在实际web项目中使用时却比较麻烦,便直接粗略了解后开始使用jQuery。但现如今,前端发展迅速,js语法方便也有了相当大的改善,并且伴随着node.js的登场,js的适用性也更加广泛。其实也是自己了解到了electron的存在,再加上web开发中前端与后端开发也比较密切,于是这便又掉头回来重新开始学习js。在学习的过程中,仔细学习了一下js的原型链,也在这里做个记录,如果有不对的地方,还请各位指出,本人感激不尽!
正文
在js的世界中,一切皆对象,那么我们先将对象分为三类:实例对象、原型对象、函数对象。
实例对象简单说就是通过构造函数所创建的对象。
函数对象好理解,js的函数本身也是个对象,这个对象有这方法名、参数、方法体等属性。构造函数是一种特殊的函数,了解过其他OOP语言都知道,构造函数往往会在实例对象创建的时候调用,主要是用来完成实例对象的初始化操作。但是在js中,构造函数与普通函数并不太大区别,我们也可以像使用普通函数一样使用构造函数,即不使用new关键字。所以从本质上讲,普通函数也是构造函数,而构造函数只是从功能上区分的一个称呼,体现在代码里就是用不用new关键字。但为了接下来的说明,下面将都会使用构造函数对象。
原型对象比较特殊, 现在先暂时记住通过实例对象与函数对象都能找到对应的原型对象。
这三类对象之间其实都有着联系,而通过这些联系就形成了js的完整的原型链。我们接下来就按照这三类对象之间的关系来逐渐了解原型链。
实例对象与构造函数对象
首先来看实例对象与构造函数对象的联系。通过new关键字,我们可以通过构造函数得到一个实例对象。例如:
function Student(name){
this.name = name;
}
var stu = new Student('wang');
在上面的片段中,Student是一个构造函数,stu则是一个通过Student创建的实例对象。二者的联系很明显,而在js里则体现在实例对象stu的constructor属性中:
stu.constructor === Student; // true
那么反过来,我们虽然不能通过构造函数对象直接找到它所有的实例对象,但是可以通过instanceof
关键字来判断一个对象是不是这个构造函数的实例对象:
stu instanceof Student; // true
原型对象与其他两类对象
上面我们也说了,构造函数与普通函数没有什么区别,那么直接使用构造函数,那this自然是指内置全局对象window。但如果用new,this就指的是新的实例对象,而且这个方法还会返回这个实例对象。到这里大致就能猜到加了关键字new做了什么操作了,它创建了一个新的空对象,并且把构造函数中的this替换为空对象,最后把这个对象返回。
那么为实例方法增加一个普通函数也这样做,从结果来说是没有问题的:
function Student(name){
this.name = name;
this.say = function(){
console.log`I'm ${name}`;
};
}
stu1 = new Student('wang');
stu2 = new Student('li');
stu1.say(); // I'm wang
stu2.say(); // I'm li
stu1.say === stu2.say; // false
但是我们会发现,stu1与stu2的say函数对象竟然不是一个,那就说明如果创建了1000个Student,就会有1000个say函数对象出现,而这1000个say实现的功能完全一致,这对内存而言显然是极大的浪费。
如何解决这个问题呢?既然多个函数完全一致,那么自然可以把这个函数对象放在一个地方,当访问stu1和stu2的say函数时,统一去拿这个地方的函数对象即可。如果我们自己实现这个功能,当在实例对象中使用函数对象时,我们又得自己去手动去公共的地方寻找函数对象,这么做显然太费劲了。
好在这些js都已经帮我们做了,每个构造函数对象都拥有一个prototype属性,这个属性指向的是一个对象,这个对象我们就叫它原型对象。而这个原型对象又拥有一个与实例对象一样的constructor属性,同样也是指向构造函数对象。
另外,对于每个对象,又都有一个__proto__的属性指向它的原型对象。当我们访问一个对象的某个属性时,实际上是先在当前对象寻找这个属性,如果没有找到,则会继续到__proto__所指的对象(原型对象)中寻找。
function Student(name){
this.name = name;
}
Student.prototype.say = function(){
console.log`I'm ${name}`;
};
new Student('liu').say === new Student('zhang').say; // true
为方便理解,这里再放一张图,对照着这张图下面的代码就容易看明白了,之后如果遇到不明白的也可以回过头来看图,直观明了。
var chen = new Student('chen')
chen.__proto__ === Student.prototype; // true
chen.constructor === Student; // true
chen.constructor === Student.prototype.constructor; // true
深入
明白了上面这些概念,我们把视角放大,不再局限于Student。前面我们说到所有对象都有一个__proto__的属性,那么对于函数对象和原型对象自然也不例外,我们接下来的关注点就是这两类对象的__proto__属性。
首先来看函数对象。在前面的代码中,Student函数对象的__proto__是谁呢?答案是Function的原型对象。
Student.__proto__ === Function.prototype; // true
一切皆对象,那么Function的__proto__又是谁?还是Function的原型对象:
Function.__proto__ === Function.prototype; // true
为什么?因为Function也是个函数对象。通常我们创建函数的方式为
function xxx(x){...}
var yyy = function(y){...};
那么其实还有一种写法:
var zzz = new Function('z','...');
// 例如:
var hello = new Function('msg','console.log(msg)');
hello('hi'); // hi
这样的写法显然能直接看出来,Function是个函数对象。于是便有一些有趣的事情了:
Function.__proto__ === Function.prototype; // true
Function.constructor === Function; // true
Function.constructor === Function.prototype.constructor; // true
Function是自己的函数对象,也是自己的实例对象:
var Function = new Function(...);
至于为什么会这样,这就比较像先有鸡还是先有蛋的问题了。我们只需要知道所有函数对象(包括Function)的__proto__都指向Function的原型对象。
与Function类似,Object也是一个函数对象。(举一反三,Array,String,Number等都是)
我们可以这样创建一个空的Object:
var obj = new Object();
那么Object的原型对象的__proto__是谁呢?是null。
Object.prototype.__proto__; // null
之前说过,当我们用.操作符去拿一个属性时,js会先在当前对象里寻找,没有的话去__proto__的对象(原型对象)里寻找。那么如果__proto__(原型对象)里还没有,就继续去它的__proto__里寻找,以此重复。那么什么时候是个头呢?直到__proto__为null时。
我们知道所有对象都有toString方法,Student的实例对象stu也是个对象,但我们明显没有给它添加toString方法,为什么它会有呢?因为stu的__proto__最终指向的是Object的原型对象。这也就是js继承的本质了。
stu.__proto__; // {constructor: ƒ}
stu.__proto__.__proto__; // {constructor: ƒ, …, toString: ƒ, …}
stu.__proto__.__proto__ === Object.prototype; // true
stu.toString === Object.prototype.toString; // true
所以,遍历所有对象的__proto__最终都会来到Object的原型对象。
- js的动态加载、缓存、更新以及复用(二)恼人的命名冲突
- 以【猫叫、老鼠跑、主人醒】为例子,使用 javascript 来实现 观察者模式 (有在线演示)
- Debian/Ubuntu-shell脚本来管理iptables安全策略
- Pegasus间谍套件内部原理及流程剖析
- 用node.js实现ORM的一种思路
- iOS“远程越狱”间谍软件Pegasus技术分析
- 学习HTML5之表单
- 基于jQuery的ajax对WebApi和OData的封装我们还是先来看看要求在看看目标:思路封装方式
- js的动态加载、缓存、更新以及复用(四)
- ajax的再次封装!(改进版) —— new与不 new 有啥区别?
- ajax的再次封装!
- 【自然框架】js版的QuickPager分页控件 V2.0
- 你的SQL语句放在了哪里?
- oclhashcat:离线hash密码破解工具官方文档(中文版)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 洛谷 P1077 摆花(记忆化搜索 or DP)
- Vue 使用 element-ui
- Codeforces Round #629 (Div. 3) F. Make k Equal (技巧暴力,类前缀和,思维,数学)
- vue 渐变色文字
- Java 水题系列(2)Pi的近似值
- vue 无缝滚动组件 vue-seamless-scroll
- Java 水题系列(3)回文素数
- NDB Cluster 8.0中的自动模式同步:第1部分
- MongoDB助力一个物流订单系统
- NDB Cluster 8.0中的自动模式同步:第2部分
- NetCore配置框架详解
- 初识ABP vNext(11):聚合根、仓储、领域服务、应用服务、Blob储存
- 群组复制MySQL Group Replication
- 关于自定义单选框InfoPreference的笔记
- Python爬虫之gerapy爬虫管理