js原型链快速理解

理解原型链首先需要知道js中的两个对象:普通对象和函数对象;(函数对象的本质还是一个普通对象,它有着特殊的属性)

普通对象

1
2
3
4
5
let a = {};
let b = new Object();

function C(){}
let c = new C();
上面的a,b,c都是普通对象;

函数对象

上面的C就是一个原型对象,下面我们在浏览器中看一下C(为了方便):

可以看到C是一个函数,但它的本质还是一个对象,称它为函数对象;之所以这么说,是因为函数对象有着与普通对象没有的特殊属性,下面继续看图:

通过上图知道:c是通过函数对象C创建而来,分别用Reflect.ownKeys输出了他们的拥有的属性,函数对象C拥有一个特殊的属性:prototype,它叫原型对象,记住这个属性是函数对象特有的属性。这个对象有一个constructor属性它又指向函数对象本身
原型对象(prototype)就是函数对象的一个特殊属性。但注意:原型对象的本质也是一个普通对象。
下面来看普通对象中的特殊属性:
上面的打印中看到普通对象c没有什么特殊的属性,但它确实有一个特殊属性,只是Reflect.ownKeys没有获取到而已,这个属性就是 __proto__,我们再在浏览器中看一下普通对象c:

可以看到c确实有一个__proto__属性,这个属性你用nodejs运行,也能够输出出来。
继续看普通对象的__proto__属性和函数对象的prototype的关联:
普通对象的__proto__属性指向创建它的函数对象的原型对象
在上面例子中也就是c.__proto__ === C.prototype

原型链

上面说了原型对象,它是函数对象的特殊属性,但原型对象也是一个对象,只要是对象它就有__proto__属性。这个属性指向创建这个对象的函数对象的原型对象。在上面的例子中,c.__proto__.__proto__属性指向的是Object函数对象的原型对象,看图:

Object函数对象的原型对象就没有__proto__属性了,也就是说到这里就截止了。综合上面的__proto__属性链条,可以画出下面的图:

作者

itpika

发布于

2020-01-08 09:55:45

更新于

2021-01-28 16:44:10

许可协议

评论