原型对象、原型链

88 阅读3分钟

希望有大佬看到可以指正写的不好的地方

1.对于原型对象、原型链的解释

什么是原型对象?

我们可以对原型对象这个词进行拆分,没错是原型和对象,js里的对象相信可以不用解释了,也就是说原型对象不过也是一个对象罢了。那么什么是原型呢,这里又要引出一个概念叫构造函数

构造函数:

大家都知道对象的创建可以通过字面量的方式来创建,但如果有很多个对象拥有相同的属性,比如人都有姓名年龄性别等属性,我们就可以声明构造函数,然后通过new关键字来创建这些拥有相同属性的对象了,至于姓名是什么,年龄多少,我们就可以在创建这个对象的时候把这些信息当成参数传进去了,构造函数只是一个普通函数被当成用来专门构造对象的一个函数。构造函数有prototype属性,普通函数也有。

cut1.png

原型:

上面解释了构造函数,这里做个补充,每个构造函数在被创建的时候,浏览器就会在内存中按照一定的规则创建一个这个构造函数的原型,我们可以通过prototype来访问它(这个prototype属性默认不可见,不可枚举,不可遍历,任意函数都有这个属性),它是一个对象,所以又叫原型对象

cut2.png

构造函数的prototype属性指向构造函数的原型对象

而原型对象中也有一个属性constructor又指向了这个构造函数,如下图

cut3.png

什么是原型链?

既然构造函数有这种特性,那么作为它构造出来的对象有没有这种特性呢,__proto__这个属性也可以访问到原型对象,而且是将这个对象构造出来的构造函数的原型对象,也就是说

cut4.png

Object函数和Funtion函数

以上的讨论都是基于实例的层面,这里我们将追溯源头,我们声明的每个对象都是Object函数的实例,每个函数都是Function的实例,它们的prototype又是指向什么呢,它们的__proto__又指向什么呢

Funtion函数:

前面说到__proto__这个属性也可以访问到原型对象,而且是将这个对象构造出来的构造函数的原型对象,但有一个例外,Function的__proto__指向的就是Function的原型对象Function.__proto__ === Function.prototype,为true,

因为所有的构造函数都是Function的实例对象

cut5.png

原型对象也是对象,那么Function.prototype.__proto__又指向哪里呢,前面说到__proto__这个属性也可以访问到原型对象,而且是将这个对象构造出来的构造函数的原型对象,那么谁构造了Function函数的原型对象Function.prototype呢?

cut6.png

Object函数:

是Object,因为所有的原型对象都是Object的实例对象

Object的prototype和__proto__又指向哪里呢,Object的prototype指向的就是Object的原型对象,而Object的__proto__指向的就是Function的原型对象。因为Function实例了Object这个构造函数

cut7.png

Object.prototype的__proto__又指向哪里呢

cut8.png

根据上面Object.__prptoFunction.__proto__的指向,再结合前面说的 __proto__这个属性也可以访问到原型对象,而且是将这个对象构造出来的构造函数的原型对象,得出Function实例了自己还实例了Object构造函数。这个null是原型链的终点,当我们访问一个属性时,优先在自身找,找不到就会沿着原型链往上找,直到这个null,还没找到那就是undefined了

cut9.png

2.做题练习

第一题:

question1.png

第二题:

question2.png

答案依次是value a undefined value a value b

第三题:

question3.png

answer3.png