如何理解js中的原型

74 阅读2分钟

前言

今天我们来讲解一下js中的原型,我们都知道原型链在js中很重要,在学习原型链之前我们要把原型弄懂,原型相关的属性也比较多,对象有prototype属性。

prototype

创建一个构造函数Person,那我们的解析器就会向构造函数里面去默认添加一个属性,这个属性就是我们的prototype,这个属性它默认了对应着一个空对象(没有我们指定的方法和属性),这个空对象就是我们所说的原型对象,既然他是对象,所以每一个函数里面prototype属性都是不相等的,这里我们打印一下Person的prototype属性。

function Person(){
}
console.log(Person.prototype)

原型分为显示原型和隐式原型。

显示原型: 每一个函数都有一个prototype属性,就是显示原型。

function Fun(){
    //内部语句: Fun(this).prototype={}
}
console.log(Fun.prototype)

隐式原型: 每一个实例对象都有一个__proto__,就是隐式原型

let fun=new Fun()//内部语句fun(this).__proto__=Fun.prototype
console.log(fun.__proto__)
console.log(Fun.prototype===fun.__proto__)//true

打印的结果是true,说明实例对象的隐形原型等于对应的构造函数的显示原型的值。 总结: 函数的prototype属性,在定义函数是自动添加的,默认值是一个空对象,对象的__proto__属性,创建对象的时候自动添加的,默认值是构造函数的prototype属性。

图解:

image.png 左边是栈右边是堆,最开始我们创建一个函数对象,应该在堆里创建一个function对象。Fun是保存在栈里,保存的是一个地址值,命名为0x123,他指向的是函数对象,所以function对象的地址值是0x123,function对象的里有prototype属性,他指向的是一个空对象,也应该是一个地址值,命名为0x234,通过这个地址值找到这个空对象实体,空对象实体的地址值也是0x234,接下来实例化对象,所以在栈里创建一个fun,地址值是0x345,它指向的是堆里的实体,也就是Fun的实例对象,它的地址值和fun是一致的,Fun实例对象有一个__proto__,他和prototype属性是相等的,所以地址值也相同,根据这个地址值(0x234)找到这个空对象。