本篇需要提前了解的知识储备：原型和原型链，以下仅概要介绍，不作详细讲解。

详细学习可参考：
JavaScript——面向对象（封装）：https://blog.csdn.net/qq_29493173/article/details/118404400
JavaScript——面向对象之继承（原型对象）与多态（重载、重写）：https://blog.csdn.net/qq_29493173/article/details/118410075

一、构造函数/原型/原型链

构造函数：定义一类对象的统一结构

原型（对象）prototype：为所有子对象保存共有的成员（属性值和方法）

定义每个构造函数时都会自带一个原型对象——prototype
每一个JavaScript对象(除了 null )都具有__proto__属性（私有属性），指向该对象的原型。
原型对象也是一个对象！！

构造函数和原型的关系可以由上图表示：
妈妈（构造函数）：Student
儿子（实例）：student

原型对象Student prototype既是妈妈（Student）的老公，又因为student的__proto__指向他，形成继承关系，所以他也是儿子（student）的爸爸。
所以原型对象Student prototype，充当两个角色，既是妈妈（构造函数）的老公，又是儿子（实例）的爸爸，老公和爸爸是同一个东西，只是叫法不同。

原型链：由各级对象的__proto__逐级向上引用形成的多级继承关系

保存着一个对象可用的所有属性和方法
控制着属性和方法的使用顺序：先自有再共有——就近原则！（当查询一个属性或方法时，先去找自身看是否存在，如果没有才去原型链上寻找）

Person.prototype是原型对象，原型对象也是一个对象！
所以Person.prototype原型对象的__proto__指向Object.prototype，也就是本篇即将引出的顶层原型对象，因为是顶层原型对象，它的__proto__指向null。
图中这条蓝色的线即是原型链.

二、顶层对象

JS中顶级对象是Object，Object.prototype: 最顶层的原型对象

Object.prototype.__proto__ ===  null

图解

tip：为便于理解相関概念，从一个例子入手，并用通俗的家庭关系（以儿子辈分来称呼）解释：

图一

先理清左半部分的原型链：
首先有个构造函数（妈妈）Student，原型对象（爸爸）Student.prototype，有两个实例（儿子）erya 和 yuanyuan。
Student.prototype（爸爸）是对象，故它的__proto__指向Object.prototype（爷爷），对应的构造函数Object()（奶奶）

右半部分 obj1是一个对象，等价于new Object，所以它的__proto__直接指向Object!!

图二
我们可以看到图二中多加了一条浅蓝色的原型继承链，而他存在是因为构造函数是函数！
构造函数中的 function <==> new Function
所以构造函数（妈妈）Student的__proto__应指向Function.prototype（姥爷），对应的构造函数是Funtion()（姥姥）

但是最离谱的一件事来了！
Function.prototype（姥爷）是一个原型对象！
对象？那么说明它的__proto__竟然要指向Object.prototype()（爷爷）

结论

经过上面毁三观的图解之后，我们得出一些结论：

在原型链中，原型链顶端一定是Object.prototype，Function.prototype继承它而产生。
一切对象继承自Object.prototype，一切函数对象都继承自Function.prototype(且Function.prototype最终继承自Object.prototype)

普通对象和函数对象的区别：

普通对象直接继承了Object.prototype，而函数对象在中间还继承了Function.prototype（参考图左右两部分原型链）

JavaScript——原型/原型链中的顶层对象（图解）相关推荐

【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
JavaScript 删除某个数组中指定的对象
返回对象在数组中的下标: _arr表示一个Array数组,里面包括了很多的对象如下图: _obj表示某一个数组对象 function getIndex (_arr,_obj) {var len = _ ...
原型,原型链,原型的继承
原型的作用? 1.节省内存空间 2.实现数据共享(继承) 什么是原型? 任何一个函数都有propotype属性,它本身是一个对象,我们称之为原型构造函数,实例化对象与原型之间的关系? 1.任何一个函 ...
ES6_入门（3）_顶层对象属性
1 //顶层对象属性:在ES5中,顶层对象的属性与全局变量是等价的.以下代码中,为顶层对象的属性赋值与全局变量的赋值,是同一件事. 2 window.a=10; 3 console.log(windo ...
javascript原型链中 this 的指向
为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = {d: 40};var a = {x: 10,calculate: function (z) {retu ...
三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...
ES6/02/创建对象，构造函数和原型，原型和原型链，this指向，类，ES5新增的方法，数组方法，回调函数，ES5新增的字符串方法，ES5中新增的对象方法
创建对象 1,利用new Object()创建对象 var obj1 =new Object(); 2,利用对象字面量创建对象 var obj2={}; 3,利用构造函数创建对象 function S ...
js delete删除对象属性，delete删除不了变量及原型链中的变量
js delete删除对象属性,delete删除不了变量及原型链中的变量一.delete删除对象属性 function fun(){this.name = 'gg';}var obj = new f ...
javascript之原型与原型链
前言了解JavaScript的原型与原型链有助于我们更深层次的理解这门语言,看过很多相关的文章,写的都很好,下面是根据自己的理解,一步步揭开原型与原型链正文一.数据类型在JavaScr ...

JavaScript——原型/原型链中的顶层对象（图解）

一、构造函数/原型/原型链

二、顶层对象

图解

结论

JavaScript——原型/原型链中的顶层对象（图解）相关推荐

最新文章

热门文章