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操做符是否与此有关。prototype

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__也有一个相关的构造函数,咱们看看这个对象的构造函数是什么。code

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

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

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

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

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

经过前面的探讨咱们能够解释上面问题:ci

  1. Function是构造函数,因此既有prototype指针,又有__proto__指针。因为Function instanceof Function结果为true,因此说明Function.__proto__Function.prototype存在原型链关系。咱们进一步做出判断Function.__proto__ === Function.prototype // true,因此说明Function__proto__Functionprototype指向同一个对象。
  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.prototypeObject.prototype存在原型链关系,因此Object instanceof Object的结果为true。

经过以上的分析咱们能够经过一张图来讲明js中各对象间原型链关系
js原型图原型链

相关文章
相关标签/搜索