JS三座大山之原型链

在JS中原型链的概念刚开始可能一直迷惑着大多数人，我也一样，不过花点时间仔细的梳理梳理，还是很容易理解的。本文就着重介绍一下原型链，如有不对之处，欢迎指正，共同探讨，共同进步。

在面试时，面试官可能会通过对象的创建方式来引出原型链相关的问题：
那么创建对象的方式主要有以下几种：
第一种：字面量
var Obj1 = {name:”o1”};
var Obj2 = new Object({name:”o2”});

第二种：构造函数
var M = function (name) { this.name = name };
var Obj3 = new M(“o3”) ;

第三种：Object.create
var p = {name:”o4”}
var Obj4 = Object.create§;
不同的方式创建的对象略微不同。如图所示：

原型链是实现继承的主要方法，基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。
要理解原型链就要明白原型对象、构造函数、实例，三者之间的关系。
我们先来梳理三者的关系：
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，实力也有一个指向原型对象的内部指针。
当这个原型对象是另一个类型的实例，那么这个原型对象就有一个内部指针指向另一个原型，以此类推就构成了一条原型链。原型链的根就是Object.prototype。
文字描述往往没有图像描述来的直观，那么我们用一个三者之间的关系图来直观的了解。

如上图所展示的，原型对象指向构造函数的指针是 constructor ，构造函数的 prototype 指向原型对象，构造函数通过 new 操作符来创建一个实例，实例又可以通过内部指针 proto 指向原型对象。
proto 连接的这一条原型对象就构成了原型链。

如上面列举的创建对象方式的第二种方式，M 就是一个构造函数，那么 M 就应该有一个原型对象，可以通过 prototype 找到！而 M 的原型对象存在 constructor，按照上图所示， M 的原型对象的 constructor 指向的就是 M 本身；实践看结果：

上图就可以明了的证明构造函数和原型对象之间的关系；
那么我们再来看实例和原型对象的关系。依照上面的关系图，实例的内部指针 proto 指向原型对象，构造函数 M 的原型也指向同一个原型对象，究竟指向的是不是同一个原型对象呢？我们再来看：

这样两个例子就很明白的说明了实例、构造函数、原型对象三者之间的关系。
那么明白了三者之间的关系我们就来说一下原型链，从一个实例对象向上找有一个构造实例的原型对象，这个原型对象又有构造它的上一级原型对象，如此一级一级的关系链，就构成了原型链。原型链的最顶端就是Object.prototype ；

原型链最重要的作用就是继承，实例来继承上一级的属性或方法。此外，如果有多个实例，而多个实例存在共同方法，或共同属性，我们不想每一个实例都创建一份这些属性或方法，就可以将这些属性存在原型对象上，实例一样可以使用这些属性或方法；

类似于作用域链，实例在调用方法时，如果在本身没有找到，就会在原型对象上查找，如果也没有找到，就会再向上一级原型对象查找，一直找到Object.prototype ；如果中间找到会停止查找返回该方法。如果一直没找到会返回未定义；

JS三座大山之原型链相关推荐

JS题目总结:原型链/new/json/MVC/Promise
JS题目总结:原型链/new/json/MVC/Promise 1原型链相关解读: 上图中,Object,Function,Array,Boolean都是构造函数第一个框: object是实例对象 ...
[js] js怎样避免原型链上的对象共享？
[js] js怎样避免原型链上的对象共享? 组合继承优势公有的写在原型私有的卸载构造函数可以向父类传递参数劣势需要手动绑定constructor 封装性一般重复调用父类性能损耗
【JS继承】JS继承之原型链继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
《js中原型和原型链的深入理解》的笔记
前言:在微信公众号前端大全上看过<js中原型和原型链的深入理解>,个人认为这是我看过的js原型链的文章中,在思维结构上理解最清楚的一个文章了,本着温故而知新,有害怕找不到这个文章,我就把文 ...
JS数据类型构造函数原型链
js数据类型基本数据类型:string undefined null boolean number 引用数据类型 Object array function 二者的区别基本数据类 ...
js构造函数的原型链
年初前端面试,总会遇到面试官询问js的原型链问题,借用一张图片能帮助我们去复习这个问题: 1.每个构造函数都有一个prototype的原型对象,他的作用是为了共享构造方法,节省内存空间. 2.查找的机 ...
前端开发：JS中原型和原型链的介绍
前言在前端开发过程中,涉及到JS原理相关的内容也就是常用的几大模块,不仅常用而且很重要,但是涉及到原理的话会有点难懂,尤其是对JS接触不太久的开发者来讲.本篇博文就来分享一下关于JS的原型和原型链相 ...
JS中的原型链(超清晰理解)
什么是原型链原型链,所有的原型构成了一个链条,这个链条我们称之为原型链(prototype chain). 原型链的案例如果我们执行下面这段代码,因为没有定义address这个属性,程序结果理所当 ...
记录--JS精粹，原型链继承和构造函数继承的 “毛病”
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装.继承.多态. 这三个特点,以" ...

JS三座大山之原型链

JS三座大山之原型链相关推荐

最新文章

热门文章