JavaScript 原型，原型链？有什么特点？

朱雀 2021-04-16 15:40 823阅读 0赞

在 js 中我们是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性值，这个属性值是一个对 象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当我们使用构造函数新建一个对象后，在这个对象的内部 将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说我们 是不应该能够获取到这个值的，但是现在浏览器中都实现了 proto 属性来让我们访问这个属性，但是我们最好不要使用这 个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，我们可以通过这个方法来获取对 象的原型。

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又 会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就 是我们新建的对象为什么能够使用 toString() 等方法的原因。

特点：

JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与 之相关的对象也会继承这一改变。

解析：

什么是原型？

原型对象理解

1.函数对象的 prototype 属性

![0](/images/20210416/1618587331188.png)

![0](/images/20210416/1618587357762.png)

![0](/images/20210416/1618587381863.png)

![0](/images/20210416/1618587414305.png)

![0](/images/20210416/1618587433332.png)

原型属性

属性访问

每当代码读取对象的某个属性时，首先会在对象本身搜索这个属性，如果找到该属性就返回该属性的值，如果没有找到，则继续搜索该对象对应的原型对象，以此类推下去。

因为这样的搜索过程，因此我们如果在实例中添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性，因为在实例中搜索到该属性后就不会再向后搜索了。

属性判断

既然一个属性既可能是实例本身的，也有可能是其原型对象的，那么我们该如何来判断呢？

在属性确认存在的情况下，我们可以使用 hasOwnProperty() 方法来判断一个属性是存在与实例中，还是存在于原型中。注意这个方法只有在给定属性存在于实例中时，才会返回 true 。

![0](/images/20210416/1618587459553.png)

上面主要是针对属性确认存在的情况下，如果这个属性不一定存在的话，这样判断就不够准确，因此我们需要首先判断这个属性是否存在，然后再进行上面的判断操作。

判断一个属性是否存在，我们可以使用 in 操作符，它会在对象能够访问给定属性时返回 true，无论该属性存在于实例还是原型中。

因此我们可以封装这样一个函数，来判断一个属性是否存在于原型中

![0](/images/20210416/1618587484757.png)

for-in 循环

在使用 for-in 循环时，返回的是所有能够通过对象访问的、可枚举的属性，其中包括了存在于实例中的属性，也包括了存在于原型中的属性。

需要注意的一点是，屏蔽了实例中不可枚举属性的实例属性也会在 for-in 循环中返回。

所有属性获取

如果想要获得对象上所有可枚举的实例属性，可以使用 Object.keys() 方法，这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。

如果想要获取所有的实例属性，无论它是否可以枚举，我们可以使用 Object.getOwnPropertyNames() 方法。

原型链理解

ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用的一个引用类型继承另一个引用类型的属性和方法。

原型链的主要实现方法是让构造函数的 prototype 对象等于另一个类型的实例，此时的 prototype 对象因为是实例，因此将包含一个指向另一个原型的指针，相应地另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与类型的链条。这就是原型链的基本概念。

下面我们来看一个例子

![0](/images/20210416/1618587519629.png)

![0](/images/20210416/1618587539461.png)

![0](/images/20210416/1618587565864.png)

![0](/images/20210416/1618587585629.png)

![0](/images/20210416/1618587614562.png)

![0](/images/20210416/1618587635564.png)