JavaScript两张图搞懂原型链

来自:网络
时间:2022-01-09
阅读:
目录

前言:

我们上一篇文章介绍了JavaScript原型,为什么不将原型链一起介绍了呢?因为JavaScript中的原型链是一个难点,也是一个面试必问的考点,现在就来学习一下。

1.原型的关系

JavaScript中的每个函数都会有一个prototype属性,这个属性又会返回一个原型,原型又有一个constructor属性,这个属性指向与之关联的构造函数。通过构造函数实例化的对象会有一个__proto__属性,这个__proto__属性指向与构造函数的prototype指向的是同一内存。

值得注意的是__proto__属性已经在标准中被删除,这里使用Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype)代替。

现在来测试Object构造函数与原型的关系,示例代码如下所示:

// 首先 Object 是一个构造函数,就会有 prototype 属性
var result = Object.prototype
console.log(result) // 得到一个原型对象
/*
 * 原型对象的 constructor 属性 -> 返回与之关联的构造函数
 * Object.getPrototypeOf(result) 返回指向构造函数的 prototype
 */
var result2 = result.constructor
console.log(result2) // [Function: Object]
var result3 = Object.getPrototypeOf(result)
console.log(result3) // null

图解如下所示:

JavaScript两张图搞懂原型链

我们通过Object.getPrototypeOf(Object.prototype)获取Object.prototype的原型时,返回的值为null这就表示我们查找到Object.prototype就可以停止查找了。

2.原型链

为了更方便我们来理解原型链式什么,首先来看一下下面这一段代码:

function Person(name) {
  this.name = name
}

var PP = Person.prototype
var PPC = PP.constructor
// 验证与构造函数是否相同
console.log(PPC === Person) // true

// 实例化 Person
var person = new Person('一碗周')
// 获取 Person 实例化后的对象的原型
var pP = Object.getPrototypeOf(person)
// 验证 Person 实例化后的对象的原型是否指向构造函数的 prototype
console.log(pP === PP) // true

实际上所有的构造函数默认都是继承于Object的,如下代码测试:

// 获取 Person.prototype 的原型
var PPP = Object.getPrototypeOf(PP)
var OP = Object.prototype
// 判断两者是否相等
console.log(PPP === OP) // true


上面的代码表述的不是很清楚,我画了一张图来理解一下:

JavaScript两张图搞懂原型链

上图中画红色线的部分就是原型链,原型链就是原型中的关系的指向,直到最终结果为null也就是Object.prototype,原型链就结束了,也就是说**Object.prototype**是原型链中的终点。

我们可以通过Object.setPrototypeOf(obj, prototype)方法来设置具体内容的原型链,但是如果不是必要建议不要这样做,因为这样做是非常耗性能的。

3.结语

通过两张图来讲解JavaScript中的原型中的关系以及原型链是什么,最后还介绍了原型链的终点。

返回顶部
顶部