5分钟彻底了解js原型的精髓

发布者: xiaozhimn

在JavaScript中,每一个函数都有一个prototype(原型)属性,该属性是一个对象,它的作用是使特定类型的所有对象实例可以共享它所包含的属性和方法。

原型的创建分为四种状态,我们用例子来分别说明:

第一种状态:定义一个函数

function  Person(){};

在内存中会为Person函数分配一块空间,在这个空间中有一个prototype属性,另外还会为该函数创建一个原型对象,在原型对象中有一个constructor属性。Person函数和它的原型对象的关系如下图中所示。我们称这时的内存模型为原型的第一种状态。

第一种状态

第二种状态:为函数的prototype属性定义变量

Person.prototype.name = "Leon";
Person.prototype.age = 22;
Person.prototype.say = fucntion(){
    alert(this.name + ","  + this.age);
}  
此时,通过原型添加的方法和属性都被存储在原型的内存空间中。内存模型如下:

状态2

第三种状态: 通过new关键字来创建Person对象

var p1 = new  Person();
p1.say();
我们通过new Person()创建了一个Person对象p1,此时会在内存中为p1对象分配一块内存空间,在p1的内存空间中会有一个_proto_内部属性,这个内部属性是不能被访问的,它也指向Person原型,内存模型如下:  

状态3

第四种状态:再创建一个Person对象p2,并且将p2对象的name属性修改

var p2 = new  Person();
p2.name = "Ada";
p2.say(); 
当创建对象p2的时候,同样会在内存中为它分配空间,在p2对象的空间中也会有一个_proto_内部属性指向Person的原型。
当我们通过p2.name = "Ada";为对象p2的name属性赋值的时候,JavaScript会在p2的内存空间中设置自己的name属性,并将值设置为“Ada。 内存模型如下: 

状态4

读完以上文章,你一定会对prototy这个东西有更深一步的了解了。

0赞