前端百题斩【016】——原型、构造函数和实例之间的奇妙关系

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。这是前端百题斩的第16斩，希望朋友们关注公众号“执鸢者”，用知识武装自己的头脑。

16.1 基础

1. 原型

每个对象都包含一个原型属性（prototype），用于关联另一个对象，关联后就能使用那个对象的属性和方法，这其实就是JavaScript的原型式继承。操作原型有如下方法：

（1）Object.create()

根据指定的原型创建新对象，原型可以是null

const parentObj = {
    add: function() {
        return this.a + this.b;
    }
};

const newObj = Object.create(parentObj, {
    a: {
        value: 10
    },
    b: {
        value: 20
    }
});

console.log(newObj.add()); // 30

（2）Object.getPrototypeOf()

返回指定对象的原型

// ……
console.log(Object.getPrototypeOf(newObj)); // { add: [Function: add] }

（3）Object.setPrototypeOf()

设置一个指定的对象的原型到另一个对象或  null。

const parentObj = {
    add: function() {
        return this.a + this.b;
    }
};

const childObj = {
    a: 10,
    b: 20
};

Object.setPrototypeOf(childObj, parentObj);

console.log(childObj.add()); // 30
console.log(Object.getPrototypeOf(childObj)); // { add: [Function: add] }

（4）Object.prototype.isPrototypeOf()

返回一个布尔值，用于检查一个对象是否存在于另一个对象的原型链上。

console.log(parentObj.isPrototypeOf(childObj)); // true

1. 构造函数

构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

1. 实例

通过构造函数和new创建出来的对象，就是实例

16.2 三者之间关系

下面先看一张网上流传的神图，里面包含了原型、构造函数、实例三者之间的关系。

image-20210530114840237.png

上述图中内容可以简化为以下几条：

1. 原型.constructor === 构造函数

2. 构造函数.prototype === 原型

3. 实例.__ proto __ === 原型

下面先来看一段代码，这段代码虽然简短，但是里面却包含了上述的原型、构造函数和实例。

// 构造函数
function Test(a, b) {
    this.a = a;
    this.b = b;
}

// 原型
Test.prototype.add = function() {
    return this.a + this.b;
}

// 实例
const test = new Test(10, 20);
console.log(test.add()); // 30

下面来利用上述代码验证一下这三者的关系

1. 获取实例内容

image-20210530115550097.png

在实例中具备__ proto __ 属性，可以看到里面的内容就是原型，从而验证了实例.__ proto __ === 原型

1. 获取构造函数内容

image-20210530115657954.png

1. 获取原型内容

image-20210530115509806.png

在原型中具备constructor属性，该属性的内容就是构造函数，从而验证了原型.constructor === 构造函数

1.如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～

2.关注公众号执鸢者，领取学习资料，定期为你推送原创深度好文

3.关注公众号进群，里面大佬多多，一起向他们学习

1. 前端百题斩[001]——typeof和instanceof

2. 前端百题斩【002】——js中6种变量声明方式

3. 前端百题斩【003-004】——从基本类型、引用类型到包装对象

4. 前端百题斩【005】—— js中9种遍历对象的方法

5. 前端百题斩【006】——js中三类字符串转数字的方式

6. 前端百题斩【007】——js中必须知道的四种数据类型判断方法

7. 前端百题斩【008-009】——从JavaScript的代码执行过程到函数执行过程

8. 前端百题斩【010】——通俗易懂的JavaScript执行上下文

9. 前端百题斩【011】——通俗易懂的变量对象

10. 前端百题斩【012】——js中作用域及作用域链的真面目

11. 前端百题斩【013】——用“闭包”问题征服面试官

12. 前端百题斩【014】——js中的这些“this”指向都值得了解

13. 前端百题斩【015】——快速手撕call、apply、bind

14. 一篇搞定前端高频手撕算法题（36道）

15. 十七张图玩转Node进程——榨干它

16. 理论与API相结合理解Node中的网络通信

17. 一文彻底搞懂前端监控

18. 前端的葵花宝典——架构

19. canvas从入门到猪头

20. 前端工程师的一大神器——puppeteer

21. 2021 年前端宝典【超三百篇】

22. 前端也要懂机器学习（上）

23. 前端也要懂机器学习（下）

24. 学架构助力前端起飞

25. 假如只剩下canvas标签

26. Vue源码思想在工作中的应用

27. 一文搞定Diff算法

28. 百度、小红书三面，均遇“赛马”问题

29. 十五张图带你彻底搞懂从URL到页面展示发生的故事

30. 一文搞懂Cookie、Storage、IndexedDB