一文教你看懂原型!!!

谈到原型,我们都知道最重要的两个属性就是__proto__和prototype,那么他们到底有什么关系又到底是什么呢,这一篇看完相信你就会有一些理解了。

1 对象的__proto__是什么

js中万物皆对象,每个数据都会有一个__proto__的属性,这个属性叫隐式原型。
一个对象(obj)的 隐式原型(proto) 指向构造该对象(obj)的 构造函数(Object())的原型属性(Object.prototype)
这样做的原因是为了能够保证实例(obj)能够访问到在构造函数(Object())的原型属性(Object.prototype)中定义的属性和方法。



2 函数对象的prototype是什么

函数(Function)是一个特殊的对象,除了和其他对象一样有上述__proto__属性之外,还有自己特有的属性——原型(prototype),这个属性被描述成指针。
他指向一个对象类型的数据,这个对象的用途就是包含所有 将来使用该函数 构造出来的可被共享的属性和方法(我们把这个对象叫做原型对象)。

原型对象内也有一个属性,叫做constructor,这个属性包含了一个指针,指回原函数。
类似于arguments.callee,但是arguments只能在函数内部获得,而函数原型对象内的constructor属性,可以在任何能访问到这个函数的位置使用。


3 构造函数、原型、实例之间的关系

1>构造函数 Fn身上有属性prototype为原型对象,原型对象内有constructor属性指向当前prototype所在的构造函数Fn
2>在new执行构造函数Fn时,创造了一个实例对象f,实例对象f的__proto__ 指向构造函数Fn的 原型prototype
3>因为实例对象f的__proto__ 指向构造函数Fn的 原型prototype,所以实例对象f可以间接访问到Fn原型prototype的方法

在这里插入图片描述

4 实例和原型关系检测

isPrototypeOf()函数,用于检测两个对象之间似乎否存在原型关系,使用方法如下:

Fn.prototype.isPrototypeOf(f)     
// 查看 Fn 的 prototype 对象,是否是 f 原型

instanceof运算符,用于检测某实例是否来自于某构造函数,使用方法如下:

 console.log(f instanceof Fn)  
// 查看 f 对象是否是构造函数 Fn 的实例
 console.log(f instanceof Object)  
// 查看 f 对象是否是构造函数 Fn 的实例

两种使用,如果是返回ture,如果不是返回false

注意:instanceof运算符右侧为构造函数,并且js中所有原型都来自Object构造函数


5 js解析器访问属性顺序:

当访问实例 f的属性或方法时,会先在 当前实例对象 f中查找,如果没有,则沿着__proto__继续向上寻找,如果找到最顶头的Object还是找不到,则会抛出undefined。如果在实例中找到,或某层原型中找到,就会读取并使用,同时停止向上找寻
由此可见,解析器的解析顺序遵循就近原则,如果在最近的位置发现属性存在,便不会继续向上找寻。

发布了20 篇原创文章 · 获赞 63 · 访问量 7659

猜你喜欢

转载自blog.csdn.net/ephemeral0/article/details/104901024