首页 > 代码库 > JavaScript对象的创建之基于原型方式

JavaScript对象的创建之基于原型方式

2024-07-21 00:19:23   229人阅读

原型内存模型介绍

原型是javascript中非常特殊的一个对象，当一个函数创建之后，会随之就产生一个原型对象。

当通过这个函数的构造函数创建一个具体的对象之后，在这个具体的对象中就会有一个属性指向原型。

第一种状态

function Person(){    }

function Person(){}，Person函数中有一个prototype的属性指向了Person Prototype的原型对象，在原型对象中有一个constructor的属性指向了Person函数，所以可以通过new Person()创建对象。内存图如下所示：

 

第二种状态

Person.prototype.name=”zhangsan”;Person.prototype.age = 27;Person.prototype.say = function(){    alert(this.name + “,” + this.age);}

通过Person.prototype.name为原型设置值之后，这些属性和方法都是设置在Person原型中。内存图如下所示：

第三种状态

var p1 = new Person();p1.say();//检测某个对象是否是某个函数的原型//以下方法可以检测出p1是否有_prop_指向Person的原型Person.prototype.isPrototypeOf(p1)

 

当使用Person创建了对象之后，会在对象中有一个_prop_属性(这个属性是不能被访问的)指向了原型，当使用对象调用原型的时候，首先会在对象的内部找是否有这个属性，如果没有会通过_prop_去原型中找属性，所以当调用p1.say()，在自己的空间中不存在这个方法，就会去原型中寻找，找到之后完成say的调用。内存图如下所示：

第四种状态

var p2 = new Person();p2.name = “luogankun”; //是在自己的空间中定义了一个属性，不会替换原型中的属性p2.say();

当创建了一个新的p2之后，依然会有一个_prop_属性指向Person的原型，此时如果通过p2.name=”luogankun”设置了属性之后，会在对象自己的内存空间中存储name的值，当调用say方法的时候在寻找name时，在自己的空间中找到之后，就不会去原型中查找了。(特别注意：原型中的值不会被替换，仅仅只是在查找时被覆盖)。内存图如下所示：

其他方法介绍

检测某个对象是否是某个函数的原型alert(Person.prototype.isPrototypeOf(p2));  //true检测某个对象的constructoralert(p1.constructor==Person);  //true检测某个属性是否是自己的属性alert(p1.hasOwnProperty("name"));  //false , p1自己的空间中没有值alert(p2.hasOwnProperty("name"));  //true,p2在自己的空间中设置了name属性p2.say(); // luogankun 27delete p2.name;p2.say(); //zhangsan 27alert(p2.hasOwnProperty("name")); //由于已经删除了，所以是false检测某个对象在原型或者自己中是否包含有某个属性，通过in检测alert("name" in p1);  //truealert("name" in p2);  //truealert("address" in p1); //在原型和自己的空间中都没有，falsealert(hasPrototypeProperty(p1,"name"));//truealert(hasPrototypeProperty(p2,"name"));//false

可以通过如下方法检测某个属性是否在原型中存在(在原型中但是不在自己空间中)// prop in obj表示原型和自己中有，!obj.hasOwnProperty(prop)表示自己中没有function hasPrototypeProperty(obj,prop) {    return ((!obj.hasOwnProperty(prop))&&(prop in obj))}

 

 

原型重写

以上代码中当属性和方法特别多时，编写起来不是很方便，可以通过json的格式。json格式将会重写原型

function Person(){}//重写原型Person.prototype = {    constructor:Person,//手动指定constructor    name:"Leon",    age:23,    say:function() {        alert(this.name+","+this.age);    }}var p1 = new Person();p1.say();alert(p1.constructor==Person); //true， 如果不显示的添加构造，此处打印出false

原型重写内存模型1

function Person(){}Person.prototype = {    constructor:Person,//手动指定constructor    name:"Leon",    age:23,    say:function() {        alert(this.name+","+this.age);    }}var p1 = new Person();Person.prototype.sayHi = function() {    alert(this.name+":hi");}p1.sayHi(); // Leon:hi

 

内存图如下所示：

 

 

原型重写内存模型2

如果把重写放置在new Person()之后，注意内存模型：

function Person(){}var p1 = new Person();Person.prototype.sayHi = function() {    alert(this.name+":hi");}Person.prototype = {    constructor:Person,//手动指定constructor    name:"Leon",    age:23,    say:function() {        alert(this.name+","+this.age);    }}p1.sayHi(); //undefined :hi  没有报错但是没有name

 

内存模型如下所示：

 

原型重写内存模型3

function Person(){}var p1 = new Person();Person.prototype.sayHi = function() {    alert(this.name+":hi");}Person.prototype = {    constructor:Person,//手动指定constructor    name:"Leon",    age:23,    say:function() {        alert(this.name+","+this.age);    }}p1.sayHi(); //undefined :hi  没有报错但是没有namevar p2 = new Person();p2.sayHi(); //报错

 

内存模型如下所示：

 

原型重写存在的问题

基于原型的创建虽然可以有效的完成封装，但是依然有一些问题：

1、法通过构造函数来设置属性值；

2、当属性中有引用类型变量时，可能存在变量值重复

function Student(){}Student.prototype.username = new Array();Student.prototype.password = "123";Student.prototype.getInfo = function(){    alert(this.username + "-->" + this.password); }var s1 = new Student();var s2 = new Student();s1.username.push("ww");s1.username.push("ss");s1.password = "111";s1.getInfo(); //ww ss 111s2.getInfo(); //ww ss 123

内存模型如下所示：

 

JavaScript对象的创建之基于原型方式


联系
我们