js中的原型和原型链

77 阅读3分钟

原型的使用场景:创建构造函数时,可将对象共有的属性和方法添加到构造函数的原型对象中,

这样就不用分别为每一个对象添加,也不会影响到全局作用域,就可以使用这些属性和方法了

我们创建的每一个函数,解析器都会向函数中添加一个peototype属性

这个属性指向原型对象

通过构造函数的new操作创建实例对象后,会自动为构造函数创建prototype属性,该属性指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。

原型对象相当于一个公共的区域,所有同一个类的实例都可以访问这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。当我们访问对象的一个属性或方法时,先在自身寻找,有则直接使用,没有则到原型对象中寻找,找到则直接使用。

原型和原型链的基础结论

1.函数与对象的关系

函数是对象,对象都是通过函数创建的,

函数与对象并不是简单的包含与被包含的关系

2.原型的类别

显示原型:prototype,是每个函数function独有的属性,默认是一个空的Object对象,fun.prototype即原型对象

隐式原型:proto ,是每个对象都具有的属性。

3.原型和原型链

原型:一个函数可以看成一个类,原型是所有类都有的一个属性,原型的作用就是给这个类的每个对象都加一个统一的方法。

原型链:每个对象都有一个_proto_ ,它指向它的prototype原型对象;它的prototype原型对象又有一个_proto_ 指向它的prototype原型对象,就这样层层向上直到最终找到顶级对象Object的prototype,这个查询路径就是原型链。

4.JavaScript里最顶层的两个概念

Function:是最顶层的构造器

Function是JavaScript里最顶层的构造器,它构造了系统中的所有对象,包括用户定义对象、系统内置对象、甚至包括它自己。

image.png

Object是最顶层的对象

所有对象都继承Object的原型

Object也是被Function构造出来

5.instanceof

obj instanceof F

常见的不够正确的描述:用来判断一个对象是否是某个构造函数的实例,比如我们创建一个函数,并且将它实例化。

正确的描述:obj.proto.proto.....=>F.prototype。沿着对象obj的原型链查找是否存在对象F.prototype,若存在则返回true,否则flase。

经典的原型和原型链的分析

image.png 函数.prototype

因为:函数都是对象,每个函数都自带一个属性叫做prototype

所以:每个函数下其实有个prototype属性,prototype的属性值是一个对象,这个对象默认的只有一个叫做constructor的属性,指向这个函数本身。

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 11天,点击查看活动详情