构造函数,实例,原型对象它们之间的关系

276 阅读2分钟

这个三个的关系弄明白对我们 JavaScript中的继承是有些帮助的,亲身经历 希望这篇文章能帮助到大家, ~以下是正文

一.构造函数介绍

在面向对象(OOP)的语言中,存在类的概念,类就是对象的模板,对象就是类的实例,在ES6之前是没有加入类,对象也不是基于类创建的,是用构造函数来定义对象和他们的属性的。

二.自定义构造函数

function Peoples(username, userage) {
            this.name = username;
            this.age = userage;
        }

当我们new一个Peoples对象时var lucy=new Peoples('lucy', 20);则会为lucy这个对象开辟一个空间来存放地址

每一个构造函数都会有一个原型对象prototype 简单的说就是每一个构造函数都有一个prototypr属性,而这个属性则指向prototype对象

console.log(Peoples.prototype)

这个对象时构造函数有的,当然我们的对也会有,通过对象的__proto__属性就能调用

console.log(lucy.__proto__)

__proto__这个属性不需要我们添加,系统会自动添加,并且会指向构造函数的原型对象prototype 这样构造函数的prototype就可以单做我们每一个实例对象的公共空间,__proto__是一个非标准的属性,不能通过它来对构造函数中原型对象的操作,只是为我们指向一条线路来调用原型对象的属性。

三.constructor 构造函数

prototype__proto__之中都有constructor的属性,而这个就是构造函数本身,因为它指向Peoples这个构造函数,他的作用是记录该对象是哪个构造函数的,

四.Peoples中的关系

可以利用这个关系来存放一些公共方法,减少内存的开销

五.方法

问来了,在构造函数的原型对象prototype中的**proto**里面是什么呢?

在JavaScript中提供了一套Object可用的方法,这些方法是被存储在Object.prototype中的也就是 **Peoples.prototype.proto**中。

这两个的关系如图:

我们看到的Object.prototype(Object的原型对象)是可以被扩充的,当然扩充完我们的构造函数可以调用Object扩充的方法的。

来验证一下

结果为:

当然我们的实例对象也能调用该方法。除此之外,Array也能这样扩充方法的。

六.Object中的关系

七.原型链

Object和自定义构造函数它们之间也就有链一样的关系