对js构造函数,原型,原型对象的理解(1)

朴灿烈づ我的快乐病毒、 2023-07-11 12:34 27阅读 0赞

那我就开门见山咯

## 构造函数 ##

构造函数虽然好用,但是存在浪费内存的问题;  
比如  
我写了一个构造函数,里面有许多属性,也有方法,

function Star(name, age) { 
                this.name = name;
                this.age = age;
                this.sing = function() { 
                    console.log('我会唱歌');
                }
            }
            var zs = new Star('张山', 10);
            var ls = new Star('李四', 10);

**因为sing方法是复杂数据类型,当我创建一个实例对象的时候,会在开辟一个内存空间来储存我们的复杂数据类型, 可想而知我的内存浪费了多少啊.你们说惨不惨.**

证明一下

console.log(zs.sing === ls.sing);  //Flase

他们比较的时候,比较的是地址,可见 这两个实例的同一个方法并不一样

**这里我只是创建两个实例对象就要开辟2个内存空间了,那我要是创建很多个实例对象呢呢?那岂不是更惨**

问题来了,那我们怎么解决  
它来了 他=它来了 它真的来了

## 构造函数的原型 prototype ##

**构造函数通过原型分配的函数是所有对象共享的**==  
**每一个构造函数都有一个prototype属性,它指向的另一个对象.prototype它也是一个对象,它所拥有的的属性和方法,都会被构造函数所拥有**

所以啊,我们就可以吧那些不变的方法,直接定义到prototype对象的身上,这样所有对象的实例都可以共享这些方法了,不再需要开辟内存空间了

function Star(name, age) { 
                this.name = name;
                this.age = age;
            }
           Star.prototype.sing = function(){ 
            	 console.log('我会唱歌');
            }
            var zs = new Star('张山', 10);
            var ls = new Star('李四', 10);

这样我就把sing方法放到了原型对象prototype身上了,然后我再创建这两个实例,那我这两个实例能不能使用这个sing方法呢,我们来看看

zs.sing();		//我会唱歌
     ls.sing();		//我会唱歌

看到是可以使用的,已经实现共享了.再看一下他们在不在同一内存空间

console.log(zs.sing === ls.sing);//true

很好,他们终于团圆了,不在异地了,哈哈

这样成功的解决了内存浪费问题,不再需要开辟内存空间了节约内存资源,这就是我们原型的作用

提个问  
**1.原型是啥?  
它是一个对象, prototype是原型对象;  
2.原型的作用?  
共享方法**

最后记住一句话  
\*\*一般情况下,我们会把公共的一些属性定义到构造函数里面.公共的方法我们会放到原型对象身上.\*\*这样就再开辟内存空间,节约内存了.

也许有些人就会问了  
我**sing**方法已经放到了Star的原型对象**prototype**身上了,可是我**zs,ls**这两个实例没有这个方法,为什么还能访问得到呢

下一章我们来解决这个问题;期待喔  
感谢大家支持