原型、构造函数和实例之间的奇妙关系

不念不忘少年蓝@ 2022-10-09 14:29 141阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

16.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  
复制代码  
构造函数  
构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]

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

原型.constructor === 构造函数  
构造函数.prototype === 原型  
实例.\_\_ 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  
复制代码  
下面来利用上述代码验证一下这三者的关系

获取实例内容  
image-20210530115550097.png

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

获取构造函数内容  
image-20210530115657954.png

获取原型内容  
image-20210530115509806.png

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

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

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star： [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！  
来自 “开源世界 ” ，链接：[https://ym.baisou.ltd/post/744.html][https_ym.baisou.ltd_post_744.html]，如需转载，请注明出处，否则将追究法律责任。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221005/26215393cb9547618b56d8d33a6acb2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]: /images/20221005/9a3ee445807f41cf8175c3dfa82096db.png
[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu
[https_ym.baisou.ltd_post_744.html]: https://ym.baisou.ltd/post/744.html