还不懂__proto__和prototype吗???

423 阅读2分钟

1. __proto__是每个对象都有的一个属性,而prototype是构造函数构建才会有的属性。

prototype是构造函数的属性,指向属于该构造函数的原型对象
__proto__是任何对象的属性,指向该对象的构造函数的原型对象

2. __proto__指向的是当前对象的原型对象,而prototype指向的,是以当前函数作为构造函数构造出来的对象的原型对象

2.1 顶层的Function和Object

Object.__proto__==Function.prototype==Function.constructor.prototype  //true--Object也是由构造函数构建出来
上一层对象的__proto__==Object.prototype

Function.__proto__==Function.prototype  //true--自己造自己
Function.__proto__==Function.constructor.prototype  //true--核心点--上面描述第2点


Function.prototype.__proto__==Object.prototype//构造函数也是源于Object
Object.prototype.__proto__==null  //true--js万物皆对象的终点

2.2 字面量创建对象

let a={}
a.__proto__==Object.prototype//true--因为不是其他函数而是Object创建出来的

2.3 构造函数创建--注意这里不是函数,函数也是属于对象

Class B{}
let a=new B()
a.__proto__==B.prototype  //true--a指向B的构造函数
B.__proto__==B.constructor.prototype  //true--构造函数指向本身实例
B.constructor.prototype==Function.prototype  //true
B.__proto__==Function.prototype==Function.__proto__  //true--B指向Function构造函数
B.prototype.__proto__==Object.prototype  //true--最终指向Object
B.constructor.prototype.__proto==Object.prototype  //true

其实看上面例子大概都知道都是下面这句话

__proto__指向的是当前对象的原型对象,而prototype指向的,是以当前函数作为构造函数构造出来的对象的原型对象 ==>理解: 某对象A由某函数B生成,则B的prototype就是指向由B的构造函数创建的对象A,对象A的属性__proto__是指向本身 所以可以粗略理解__proto__源于prototype,proto==prototype

这里最终的prototype有两种:

一个是Object.prototype

一个是Function.prototype

Function本是自己创建自己,所以Function的__proto__==Function的prototype

知道__proto__指向prototype,那指向哪个prototype?

按照原型链顺序,指向下一个prototype,最终走到prototype有两种

1.Function.prototype--这种一般都是经过函数创建出来对象

2.Object.prototype--这种一般都是字面量对象,没有经过函数创建

但Function.prototype.__proto__==Object.prototype//true

所以万物归于对象

Object.prototype.__proto__==null//true

3.补充class情况

3.1类

class A extends Object {}

A.__proto__ === Object // true
A.prototype.__proto__ === Object.prototype // true
class A {}
A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true

3.2子类

class A {
}

class B extends A {
}

B.__proto__ === A // true

B.prototype.__proto__ === A.prototype // true

借鉴图:

image.png