透彻解读prototype与proto

亦凉 2021-09-14 15:50 330阅读 0赞

请先看一看关于 prototype 与 \_\_proto\_\_ 的一些使用情况代码：

这5种情况是 prototype 与 \_\_proto\_\_ 最常见的一些用法，有没有晕掉？不用怕，本篇文章教你如何把它们区分开，并了解它们之间的联系。

首先，要千万记住一点：**\_\_proto\_\_是每个对象都有的一个属性，而prototype是函数才会有的属性!!!** 上例中，function Person() \{ \} 是函数，var person 则是对象，我们先来看函数。

几乎所有的函数（除了一些内建函数）都有一个名为prototype（原型）的属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含了该函数构造的实例的所有共享属性和方法。prototype称为该实例的原型对象。有点绕口？我们用例子说明一下。

例子中定义了一个带有c方法的p对象，定义了一个Person函数。重点，Person.prototype可以看做是一个自身构造的过程，结果指向的对象我们暂称为**自对象**；而Person.prototype.\_\_proto\_\_则是一个继承构造的过程，结果指向的对象我们暂称为**继承对象**。**自对象和继承对象的属性和方法的并集组成了****Person函数的属性和方法**。简单公式就是：自对象（属性、方法）∪ 继承对象（属性、 方法）=new 函数（属性、方法）。因此，上例中new Person( )新建出来的var person对象同时包含了两者的属性和方法，能成功执行a()、b()、c()。

注意，当自对象与继承对象间有相同属性或方法名称时，自对象优先级较高。

若此时有一个函数POP想要继承Person函数所有的属性和方法呢？这时请使用Object.getPrototypeOf( )。实现如下：

function POP() {}
    POP.prototype.__proto__ = Object.getPrototypeOf(person);
    var pop = new POP();
    pop.a(); //a
    pop.b(); //b
    pop.c(); //c

思考一下，此处为什么要赋值给POP.prototype.\_\_proto\_\_而不是POP.prototype？

我们再看另外一个例子解释一下：

这段代码显示，自对象Person.prototype先是定义了a方法，随即将p对象赋值给自对象实现替换（此时原带a 方法的自对象已被替换），且没有额外定义继承对象Person.prototype.\_\_proto\_\_ ，因此新建出来的var person可以c执行方法，但执行a方法时发生错误。即直接使用Person.prototype = 新对象，新对象的属性和方法会破坏Person.prototype原有属性和方法。这就回答了上面例子中要实现继承时为什么要赋值给POP.prototype.\_\_proto\_\_而不是POP.prototype的问题。

那么什么是\_\_proto\_\_？对象具有属性\_\_proto\_\_，可称为隐式原型，一个对象的隐式原型指向构造自身的构造函数的原型，即a.\_\_proto\_\_ 指向  A.prototype，A.prototype.\_\_proto\_\_ 指向 Object.prototype ，直至最后指向null，指向即在内存中的物理地址相同。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

看个例子：

person.\_\_proto\_\_实质上就是Person.prototype，例子中person.\_\_proto\_\_ = p;重新赋值，已经破坏了原有自对象数据，但并不影响继承对象，因此b方法可以执行，a方法执行时将找不到。

关于\_\_proto\_\_还有一种特殊情况，例子如下：

这种情况，a方法和c方法均能正常执行。

总而言之，Fun.prototype 为自对象 ， Fun.prototype.\_\_proto\_\_ 为继承对象，自对象和继承对象的并集，构成了新建函数对象的属性和方法。obj（new Fun）.\_\_proto\_\_实质上等于Fun.prototype，技巧性记住这几点即可。关于 prototype 与 \_\_proto\_\_ 的解读到此结束，欢迎大家多多交流。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210813/810b7b49f635474da1ae241c6fdec830.png