js基础ES6入门:用图与代码详细解说,小白也可以轻松理解的构造函数和原型对象,对象原型三者关系

64 阅读3分钟

1.构造函数原型对象 prototype

1.构造函数只要new了就可以创建一个实例对象

2.每一个构造函数都有一个prototype属性指向另一个对象,这个prototype就是一个对象, 这个对象所有的属性和方法,都会被构造函数所拥有

3.可以把那些不变的方法,定义在prototype对象上,所有对象实例就可以共享这些方法

1.原型是什么:一个对象,称为prototype原型对象

2.原型的作用:共享方法

所有实例都可以共享这个方法,不需要额外开辟新的内存空间,节省内存空间

//创建了一个Star构造函数
Star function(name,age){
    this.name=name
    this.age=age
    //方法放在构造函数里面创建的ldh实例和张学友实例对象的时候都会为这同一个sing方法单独开辟一个空间
    sing:function(){
        console.log('我会唱歌')
    }
}
//实例对象
let ldh=new Star('刘德华'20)
let zxy=new Star('张学友'18)
ldh.sing()==zxy.sing()//false 因为指向的不是同一个内存栈

如图:存在着一个浪费内存空间的问题

栈不同.png

用图来理解prototype原型对象

构造函数与原型链.png

那么然后解决这个浪费内存空间的问题呢?

解决方法:把共用属性放在构造函数里面,把共用方法定义在构造函数的prototype对象上

代码示例:

//构造函数
Star function(name,age){
    this.name=name
    this.age=age
    //sing:function(){
    //console.log('我会唱歌')
    //}
}
//把方法定义在原型对象上
Star.prototype.sing:functino(){
    //console.log('我会唱歌')
}
//实例对象
let ldh=new Star('刘德华'20)
let zxy=new Star('张学友'18)
ldh.sing()==zxy.sing()//true 这次指向的是同一个栈空间,节省了内存空间

现在思考一个问题,为什么实例可以用构造函数原型对象的方法呢

这就涉及到了对象原型__proto__属性了

2.对象原型__proto__

对象都有一个__propt__属性指向构造函数的prototype原型对象,之所以对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有_ proto__原型的存在

如图来指示一下

proto.png

3.constructor构造函数

对象原型__proto__和构造函数prorotype原型对象都有一个constructior属性,称为构造函数,因为它指回构造函数本身

如果以{}方式给原型添加多个方法,这时指向的已经不是本身Star构造函数了,而是已经被赋值了一个对象覆盖了,而这个赋值了的对象是没有constructior属性的,因为已经被覆盖了,所以需要手动指回这个构造函数

代码示例

//构造函数
Star function(name,age){
    this.name=name
    this.age=age
    
}
//Star.prototype.sing:functino(){
    //console.log('我会唱歌')
//}

//原型里面有两个方法
Star.prototype={
//手动指向回Star构造函数
    constructor:Star
    sing:functino(){
   console.log('我会唱歌')
        }
   movie:function(){
   console.log('我会跳舞')     
     }
}
//实例对象
let ldh=new Star('刘德华'20)
let zxy=new Star('张学友'18)

4.构造函数和原型对象和对象原型的3者关系

3角关系图.png