javaScript原型链详解

首先我们要清楚地知道原型链的本质：原型链是一种关系，实例对象和原型对象之间的关系。

接下来就来细细分析，我们先看一段代码：

这里定义了一个构造函数Person()，然后创建了两个实例对象per，per2。我们来看一下打印的结果：

看输出很正常，没有什么问题，但是大家有没有发现，两个实例对象有一个相同的方法，虽然方法名一样，

但它们在内存里是存储在不同的地方的，也就是说，当有很多个实例对象的时候，你内存空间就爆炸了，浏览器

直接被干掉，所以我们不能直接在构造函数里声明对象的方法，那我们在哪里声明呢？

我们来看一段代码及其输出结果：

看最后一条输出结果为true，相信大家也明白这两个指向的是同一块内存空间，也就是同一个对象。也许有小伙伴会困惑，Object.getPrototypeOf(per) 这个是啥？实例对象不是通过__proto__来访问原型的吗？

OK，我们去看一下MDN文档：

正如文档所说，__proto__已经被弃用了，我们应该习惯使用Object.getPrototypeOf(per) 这种方式来访问原型，

注意：Object.getPrototypeOf() 是给实例对象来访问原型的，构造函数通过属性prototype来访问原型。

所有的构造函数都有一个原型对象，这个原型对象就是用来解决数据共享问题，用来节约内存空间的。

我们在原型对象里面声明方法，当通过构造函数去声明实例，如果通过实例调用了一个属性/方法，找不到就会到

原型上去找，一直找到原型的尽头，最后找不到则输出undefined，如果是方法则抛出错误。

所以回到文章开头那段代码所面临的问题，正确的声明方法应该是这样子的：

现在实例对象，构造函数，以及原型对象之间的关系是这样子的，我画一个图来表示：

我们打印一下原型对象看看吧：

我们可以看到，这个对象有一个constructor属性，后面的值已经告诉我们了，它是构造函数。我们来验证一下

它的指向是不是构造函数在内存中的地址：

打印结果为true，也就是说这两个东东在内存里面是同一块，所以现在实例对象，构造函数，以及原型对象的关系变成：

这就是所谓的原型链了，原型链其实就是实例对象，构造函数以及原型对象之间的关系而已。

也许有小伙伴脑洞大开，会想，原型对象的原型对象是什么呢？终点在哪？以这个为例子说：

Person.prototype指向的原型,也就是Object.getPrototypeOf(Person.prototype)指向哪里呢？

那么我问问大家，函数其实是什么？

没错，javaScript除了基本数据类型外，其他都可以看作对象。也就是Object，那么

Object.getPrototypeOf(Person.prototype)跟Object.prototype是否指向同一个空间呢？

输出为true，也就是说这两个是同一个东东。

那么Object.getPrototypeOf(Object.prototype) 是什么呢？

大家可以试试看，可以剧透一点，是原型链的尽头噢。

喜欢可以点点关注，期待与大家一起进步。

javaScript原型链详解相关推荐

硬核!原型和原型链详解
前言我是歌谣知其然知其所以然人人都有一个大厂梦希望通过自己的一个总结分享可以给予大家带来帮助和提升. 本期知识点原型和原型链目标 1理解原型和原型链 2理解构造函数 3理解构造函数原型和 ...
JavaScript作用域和作用域链详解
JavaScript作用域链详解一.JavaScript作用域 JavaScript作用域是什么? 作用域范围二.JavaScript作用域链作用域与执行上下文总结一.JavaScript作 ...
javaScript函数模块详解
javaScript函数模块详解函数实际上是对象,每个函数都是Function类型的实例,而Function也有属性和方法,和其他引用类型一样可以将函数名想象成指针,函数想象成对象注意, ...
JavaScript Class类详解
ECMAScript 6 提供了更接近传统语言的写法,新引入的class关键字具有正式定义类的能力.类(class)是ECMAScript中新的基础性语法糖结构,虽然ECMAScript 6类表面上看 ...
Token 防盗链详解
前言随着互联网的高速发展,无论是移动 APP 还是 WEB 站点,访问的安全问题始终困扰着内容提供商.CDN ( Content Delivery Network,内容分发网络 ) 服务作为当今互联 ...
javascript BOM对象详解
javascript BOM对象详解目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
javascript原型链中 this 的指向
为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = {d: 40};var a = {x: 10,calculate: function (z) {retu ...
JavaScript 运行机制详解(理解同步、异步和事件循环)
1.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
好程序员技术分析JavaScript闭包特性详解
为什么80%的码农都做不了架构师?>>> 好程序员技术分析JavaScript闭包特性详解,今天来总结一下js闭包的那些事,以及遇到的坑和解决方法,希望对你有所帮助. 是的,没 ...

javaScript原型链详解

javaScript原型链详解相关推荐

最新文章

热门文章