《Javascript中的对象和原型(三)》由会员分享，可在线阅读，更多相关《Javascript中的对象和原型(三)（5页珍藏版）》请在金锄头文库上搜索。
1、Javascript 中的对象和原型中的对象和原型(三三)作者: 念在三角湖畔 来源: 博客园 发布时间: 2012-05-31 10:39 阅读: 29 次 原文链接 全屏阅读 收藏 在 Javascript 中的对象和原型(二)中我们提到，用构造函数创建的对象里面，每个对象之间都是独立的，这样就会降低系统资源的利用率，解决这样问题，我们就要用到下面提到的原型对象。一一 原型对象原型对象原型对象实际上就是构造函数的一个实例对象，和普通的实例对象没有本质上的区别。可以包含特定类型的所有实例的共享属性或者方法。这样，如果我们需要修改所有实例中的属性或者方法，就只需要修改一处，就能够影响到所有实例
2、了。因为原型中的属性和方法是共享的。我们可以看下两个图示：构造函数方式原型模式方式从上面的图示中我们就不难看出，为何下面的代码中“user1.show = user2.show;“返回的是 ture，因为 show 方法是所有由 User 构造函数创建的对象所共享的，而不是每个对象都各自创建了一个 show 方法。每个 JavaScript 函数都有 prototype 属性，这个属性引用了一个对象，这个对象就是原型对象。原型对象初始化的时候是空的，我们可以在里面自定义任何属性和方法，这些方法和属性都将被该构造函数所创建的对象继承。Prototype，这个属性引用了一个对象，它又有一个属性，c
3、onstructor，它的值是一个函数对象。在原型中添加属性和方法可以参照如下代码：function User(name,age)/构造方法this.name = name;/对象属性this.age = age;User.prototype.addr = 湖北武汉;/在原型中添加属性User.prototype.show = function()/在原型中添加方法alert(this.name+|+this.age); ;var user1 = new User(ZXC,22);/创建实例var user2 = new User(CXZ,21);user1.show();/调用 show()
4、方法user2.show();alert(user1.show = user2.show);/返回 true 说明 show 方法是共享的alert(user1.addr);/湖北武汉alert(user2.addr);/湖北武汉 但是有个问题是：如果我们既在构造方法中添加了一个属性、又在原型中添加了该属性，还在实例中添加了该属性，那么我们访问的究竟 是哪一个属性呢？我们先看看下面的代码：function User(name,age)/构造方法this.name = name;/对象属性this.age = age;this.addr = 湖北恩施;User.prototype.addr =
5、湖北武汉;/在原型中添加属性var user1 = new User(ZXC,22);/创建实例var user2 = new User(CXZ,21);alert(user1.addr);/湖北恩施delete user1.addr;/删除对象属性alert(user1.addr);/湖北武汉delete User.prototype.addr;alert(user1.addr);/undefineduser2.addr = 武汉;alert(user2.addr);/武汉 从上面的代码可以看出，如果我们同时申明了对象属性、原型属性和实例属性，那么调用时显示的优先级应该是：实例属性对象属性原
6、型属性。这就是采用了就近原则：调用时首先查找实例中是否直接定义了这个属性，有则返回实例属性；如果实例属性中没有就去构造函数中查找，有则返回；如果前面两者都没有就去原型对象中查找，如果没有则返回 undefined。二二 动态原型模式动态原型模式有人可能会觉得上面代码中的写法感觉很别扭，因为原型中的方法和属性与构造函数中定义的对象属性和方法不在一块儿，要是能封装在一起就更加直观，如果要解决这个问题，就要用到动态原型模式；/动态原型模式function User(name,age)/构造方法this.name = name;/属性this.age = age;this.addr = 湖北恩施;Us
7、er.prototype.addr = 湖北武汉;/在原型中添加属性User.prototype.show = function()/在原型中添加方法alert(this.name+|+this.age+|+this.addr); ;var user1 = new User(ZXC,22);/创建实例var user2 = new User(CXZ,21);user1.show();/调用 show()方法user2.show();alert(user1.show=user2.show);/返回 true 上面的代码看起来要更加直观。但是这样还是会有一些小的问题，就是我们在创建多个实例的时候，
8、每创建一个实例就会在原型中重新创建一次原型中的方法。先来测试一下：alert(开始创建 show);User.prototype.show = function()/在原型中添加方法alert(this.name+|+this.age+|+this.addr); ;alert(结束创建 show); 如果我们添加上面的 alert()，运行时发现，没创建一个实例都会弹出两次对话框。这就证明了上面提到的重新创建的问题，虽然这样来说空间没有额外增加，但是时间却是增加了，因为每次都要重新创建。要解决这个问题，我们的思路是：首先判断 show 方法是否存在，如果不存在则创建，如果已经存在就不在重新创建
9、。改进代码如下：if(this.show=undefined)/如果 run 方法还没有被创建alert(开始创建 show);User.prototype.show = function()/在原型中添加方法alert(this.name+|+this.age+|+this.addr); ;alert(结束创建 show); 运行发现，不管创建多少个实例都只会弹出两次对话框，这样就避免了不必要的开销。三三 使用字面量方式创建原型使用字面量方式创建原型除了上面提到的创建原型的方式，我们还可以用字面量方式创建，代码如下：/使用字面量方式创建原型function User(name,age)/构造
10、方法this.name = name;/属性this.age = age;User.prototype = addr : 湖北武汉,show : function()alert(this.name+|+this.age+|+this.addr);var user1 = new User(ZXC,22);/创建实例var user2 = new User(CXZ,21);user1.show();/调用 show()方法user2.show(); 这里要说明的是：使用字面量方式创建后，不能再使用字面量字面量的方式重写原型，一旦重写了原型，原来的原型中定义的所有属性和方法都将被清除。如下：/使用字
11、面量方式创建原型function User(name,age)/构造方法this.name = name;/属性this.age = age;User.prototype = addr : 湖北武汉,show : function()alert(this.name+|+this.age+|+this.addr); /重写了原型User.prototype = other : 暂时没有说明,show : function()alert(this.addr); ; var user1 = new User(ZXC,22);/创建实例var user2 = new User(CXZ,21);user
12、1.show();/返回 undefineduser2.show(); 可见，一旦我们重写了原型，那么开始原型中定义的变量和方法都没有保存下来。但是，我们说的是不能用字面量的方式重写原型，那我们可不可以添加新的方法或者属性呢？答案是可以的，比如：User.prototype.addr1 = 武汉; 这样就不会清楚原来原型中定义的方法和属性了。四四 总结总结这里主要是介绍了原型的一些基本的知识，原型可以用来实现方法和属性的共享，也可以用来扩展对象的方法。比如我们可以用原型方法来扩展内置对象 String 的方法，让它具有 VB 的 left()/right()功能，是实现截取字符串左边或者右边的功能。原型中还有一些其他的知识，这里没有涉及到，以后有时间继续讨论研究
