IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【学习笔记】对JS原型和原型链的理解 -> 正文阅读

[JavaScript知识库]【学习笔记】对JS原型和原型链的理解

周一面试腾讯,面试的题很基础,我自认为我的基础还算不错,但是…好像不是。看一下题吧

[].__proto__ === ?
[].__proto__.__proto__ === ?
[].__proto__.__proto__.__proto__ === ?

平时关注原型链关注的最多的就是函数,从来没有想过数组的原型链,看到了自己基础的漏洞。
讲原型链,就先从原型讲起吧,以下内容就是我学习原型和原型链之后对这块的理解。
如有错误,望指正~


1.原型

每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。实际上,这个对象就是通过调用构造函数创建的对象的原型。 --《Javascript高级程序设计》

上面这句话可以得到三个信息:

  1. 当我们创建一个函数的时候,就会随之创建一个prototype属性,这个属性是一个js对象。(同时原型对象会获得一个constructor的属性,也是一个对象,指向相关的构造函数本身,例如:Person.prototype.constructor === Person;)
  2. 原型的用处是:在原型上的方法和属性可以被对象实例共享。比如说想给数组定义一个方法,让所有创建出来的数组使用,那就可以在Array.prototype上定义;
  3. 对象实例的__proto__指向构造函数的prototype。

到这我对原型就有了一个大概的了解。但是我还搞不懂一个问题,不是说“每个函数都会创建一个prototype属性”吗?Array是一个数组对象,为什么它会有prototype属性。
关于这个问题,我看了一下MDN,如图:
在这里插入图片描述

Array 构造器会根据给定的元素创建一个 JavaScript 数组,但是当仅有一个参数且为数字时除外。我们创建数组的时候可以直接[]创建,也可以new Array()创建。
也就是说关于Array(),是我的理解错误,它并不是一个数组,而是一个构造函数,那么它有prototype属性也就不难理解啦。

2.原型链

这里还是引用书上的话对原型链做出解释吧。

重温一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。–《Javascript高级程序设计》

也就是说每个由构造函数创建出来的实例对象都有一个隐式原型__proto__,指向构造函数的原型prototype,并且这个原型也有一个__proto__属性,就这样一直向上,直到尽头null。

到这里其实面试题的答案就已经出来了,我把以上总结为谁的__proto__指向实例对象的prtotype。其中的特殊情况是:Function的__proto__指向自身的prototype,
Object的prototype的__proto__指向null。

按照我的结论再看看面试题:

[].__proto__ === ?
[].__proto__.__proto__ === ?
[].__proto__.__proto__.__proto__ === ?

答案应该依次为Array.prototype,Object.prototype,null
在这里插入图片描述

第一个应该很好理解,[]是new Array()创建出来的,所以[].__proto__就指向了Array的原型prototype;
第二个由第一个可以转换为Array.prototype.proto,在原型那块说过prototype是一个js对象,那还可以转换为Object.proto,最后就是Object.prototype
第三个就是Object.prototype.proto,也就是null。


当时不会这个题的时候我对面试官说不太了解数组的原型,函数和对象的还可以,然后又给我出了个题,也不会。。。。

({}).__proto__ === ?

现在看很明显了,就是Object.prototype。为啥用括号括起来呢,为了防止报错。
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-04 12:46:00  更:2021-10-04 12:46:04 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:10:24-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码