#### JavaScript 原型链

161 阅读2分钟

JavaScript 原型链

原型链的两个方法
  1. prototype: 函数独有的,用于从函数指向Object对象。因为所有的函数都可以作为构造函数。那么在用函数生成对象时。里面的代码即为构造方法。那么,prototype有什么用呢?可以作为static,实例的共享属性。即通过这个构造函数生成的实例。可以通过_proto_来获取构造函数的prototype。以来获取共享的属性
  2. proto: 对象独有的,用于指向父级的prototype,因为所有对象都是使用构造函数构造出来的。所以__proto__用来指向构造该对象的函数的prototype
  3. constructor:构造函数。在js中,constructor指向创建对象的函数本身
解析原型链的顺序
1. 解析构造函数构造的对象的__proto__

先来看这么一段代码

function User(){}
const user = new User()
console.dir(user.__proto__)

在这段代码中,user的__proto__会是谁?在解析这个问题前,我们需要知道,proto属性用于获取父构造器的prototype。
那么是谁构造了user?是User函数。所以user的__proto__属性为User的prototype。user -> User.prototype

2. 解析函数对象的proto

User函数也会有proto?
因为在js里面,将函数也定义成一个对象,所以函数也叫做函数对象。函数既有proto也有prototype
重新看上面那段代码,我们来解析一下User函数的proto是什么?
在这里只需要记住一个概念,任何函数的proto的都是Function.prototype。如Array,Number和自定义函数等
那么,User函数的proto为Function.prototype。
即user -> User.prototype -> Function.prototype

3. 解析Function的proto

到Function这一层,它的proto即为Object的prototype。而Object.prototype的proto为null。这个是固定的
user -> User.prototype -> Function.prototype -> Object.prototype

Object构造函数的proto

在这里会出现一个问题,即Object为一个函数,而函数的proto都是为Function.prototype。那么,是不是会套娃的?但是并不会。下面解析一下
因为访问的属性不一样,即:
Function的原型链:
Function.proto -> Object.prototype -> Object.prototype.proto -> null
Object的原型链:
Object.proto -> Function.prototype -> Function.prototype.proto -> Object.prototype -> Object.prototype.proto -> null
一个是访问Object.proto,而原型链访问的是Object.prototype。所以不会套娃