js 总结系列（三）原型链

五个基础点：

1. 所有的函数都有 prototype 属性，指向该函数的原型对象；
2. 所有的对象都有__proto__属性，指向该对象的构造函数的的原型对象；
3. 由于js中万物皆对象，所以构造函数也有__proto__属性；
4. 构造函数是通过Function构造函数构造出来的实例，所以构造函数的__proto__属性皆指向同一个对象，通过2可得，都是指向Function的原型对象；
5. 所有构造函数的原型对象的constructor都指向构造函数本身

构造函数、构造函数实例、构造函数原型对象之间的关系

1. js中的对象是通过构造函数创造出来的，构造函数的prototype指针指向了一个对象，我们可以叫它构造函数的原型对象，通过构造函数创造出来的实例上也有一个指针指向构造函数的原型对象。这样构造函数创建的实例就跟构造函数的原型对象就关联起来了。
2. 构造函数原型对象的constructor指针指向构造函数，构造函数的prototype指针指向其原型对象。

instanceof 操作符

与typeof操作符类似，instanceof是用来判断对象类型的，使用该操作符的表达式返回值是布尔值，true表示第一个操作数是第二个操作数的实例，并且具有继承关系的对象也可以返回true。

function A() {};
function B() {};
let a = new A();
a instanceof A // true
a instanceof B // false
a instanceof Object // true

上面例子中说明了对象a是构造函数A的实例，同时也是构造函数Object的实例，但是不是构造函数B的实例。我们思考一下：为什么会有这种结果？我们可以根据构造函数、构造函数实例、构造函数原型对象之间的关系来了解。
a 与 A之间的关联关系是因为二者都有一个指针指向同一个对象（构造函数原型对象），那么我们可以验证一下instanceof操作符是否与此有关。

a.__proto__ = B.prototype
a instanceof A // false
a instanceof B // true
a instanceof Object // true

通过以上示例可以得出instanceof操作符的结果确实反应的是实例对象跟原型对象之间的关系。为什么
a也是Object的实例呢？通过上面的分析可以得出a与Object的原型对象存在某种联系。

function C() {};
let objC = new C();

上面示例中，function C是一个函数，函数也是一个对象。在js中函数是通过Function构造函数创建的，也就是说C.__proto__ === Function.prototype。同样来说，Function.prototype这个对象的__proto__也有一个相关的构造函数，我们看看这个对象的构造函数是什么。

Function.prototype.__proto__.constructor // [Function: Object]

也就是说Function.prototype对象是Object构造函数创建的。

Function.prototype.__proto__ === Object.prototype // true

说明了Function的原型对象的__proto__指针指向了Object的原型对象。
我们再来整理一遍上面的问题。

objC.__proto__ === C.prototype;  // true
C.__proto__ === Function.prototype;  // true
Function.prototype.__proto__ === Object.prototype; // true
C.prototype.__proto__ === Object.prototype; // true

我们可以发现objC与Object.portotype之间通过__proto__实现了关联，也就是说这种关联关系可以通过instanceof操作符来判断是否存在。这种关联关系就是原型链。
再看一组示例：

Function instanceof Function // true
Function instanceof Object // true
Object instanceof Function // true
Object instanceof Object // true

通过前面的探讨我们可以解释上面问题：

1. Function是构造函数，所以既有prototype指针，又有__proto__指针。由于Function instanceof Function结果为true，所以说明Function.__proto__ 与 Function.prototype存在原型链关系。我们进一步作出判断Function.__proto__ === Function.prototype // true，所以说明Function的__proto__跟Function的prototype指向同一个对象。
2. Function instanceof Object为true说明Function.__proto__与Object.prototype存在原型链关系，我们进一步作出判断Function.__proto__.__proto__ === Object.prototype // true，说明Funciton的原型对象的__proto__指针指向了Object的原型对象。
3. Object instanceof Function为true说明Object.__proto__与Function.prototype存在原型关系，进一步判断Object.__proto__ === Function.prototype // true说明Object构造函数是Function的实例对象。
4. Object.__proto__与Function.prototype指向相同，由于Function.prototype与Object.prototype存在原型链关系，所以Object instanceof Object的结果为true。

通过以上的分析我们可以通过一张图来说明js中各对象间原型链关系

转载于:https://www.cnblogs.com/kingsm/p/10361645.html