JavaScript原型梳理

时间 2019-11-24

标签 javascript 原型梳理栏目 JavaScript 繁體版

原文原文链接

JavaScript中原型这个概念很常常被提起，那么它究竟是什么呢，它又有什么用呢?接下来让咱们一步一步来理解它。javascript

认识原型

原型的概念

在JavaScript中，原型也是一个对象，经过原型能够实现对象的属性继承，JavaScript的对象中都包含了一个[[Prototype]]内部属性，这个属性所对应的就是该对象的原型。html

原型访问器

[[Prototype]]做为对象的内部属性，是不能被直接访问的。不过咱们能够经过下面这几种方式来获取到原型。java

__proto__
Object.getPrototypeOf
obj.constructor.prototype

那么可能会有人疑惑，平时咱们能够经过函数的prototype属性来获取对象原型，这个又是怎么回事？好吧，让咱们看个例子。git

function Foo () {}
const f1 = new Foo()
const f2 = new Foo()
复制代码

从上面的图咱们能够看出f1和f2对象的__proto__属性是指向原型对象的Foo.prototype。github

同时这边也回答了为何函数的prototype能够获取到对象原型，这是由于函数中有prototype这个属性，它是指向原型对象的。闭包

原型对象中也有constructor属性指向Foo这个构造函数。因此能够用第三种方式来获取到对象原型，不过这个方法不可靠，由于属性能够变嘛。函数

总结下：ui

每一个构造函数都有一个原型对象(prototype)，原型对象都包含一个指向构造函数的指针(constructor)，而实例都包含一个指向原型对象的内部指针(proto)。spa

这边抛出两个问题：prototype

上面说到原型也是一个对象，那么它确定也有原型的，它的原型又是指向什么呢？
Foo函数也是一个对象，它的原型指向哪里呢？

要想回答这两个问题？这边要引入一个概念原型链

原型链

原型链概念

原型链做为实现继承的主要方法，其基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。

实例分析

仍是Foo函数来举例子吧。

Function Foo () {}
const f1 = new Foo()
const f2 = new Foo()
const o1 = {}
const o2 = {}
复制代码

先来看下上面的第一个问题：

从这个原型链图中能够看出Foo.prototype这个对象的原型是Object.prototype。这个也应验了全部对象都继承自Object.prototype。

这边还能够看到Object.prototype原型是指向null的。

接下来来看下第二个问题：

从上图能够看到Foo函数的原型是指向Function.prototype的。

不知道大家有没注意到，Function的原型也是指向Function.prototype的，还有Function.prototype指向Object.prototype

同时这边能够看到Objcet也是由函数建立的，函数的原型链上又有Object.prototype，这边好像有问题，Objcet没被建立以前，函数原型链上为何会有Object.prototype？

这边有一种的解释是：

先有 Object.prototype（原型链顶端），Function.prototype 继承 Object.prototype 而产生，最后，Function 和 Object 和其它构造函数继承 Function.prototype 而产生。

顺便提下函数其实也有一个constructor属性，它是指向Function的。

Foo.constructor === Function  // true
Array.constructor === Function // true
Function.constructor === Function // true
Object.constructor === Function // true
复制代码

讲到这里也差很少了，出一些题给你们看看。

function Foo () {}

typeof (Object) // function
typeof (Array) // function

Foo.constructor === Function // true
Function.constructor === Function // true

Object.prototype.constructor === Object // true
({}).__proto__ === Object.prototype // true

Object.__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true

Object instanceof Function // true
Function instanceof Object // true

typeof Object.prototype // object
typeof Function.prototype // function
复制代码