一 原型对象

  原型对象实际上就是构造函数的一个实例对象,和普通的实例对象没有本质上的区别。可以包含特定类型的所有实例的共享属性或者方法。这样,如果我们需要修改所有实例中的属性或者方法,就只需要修改一处,就能够影响到所有实例了。因为原型中的属性和方法是共享的。我们可以看下两个图示:


      构造函数方式

原型模式方式

  从上面的图示中我们就不难看出,为何下面的代码中"user1.show == user2.show;"返回的是ture,因为show方法是所有由User构造函数创建的对象所共享的,而不是每个对象都各自创建了一个show方法。

  每个JavaScript函数都有prototype属性,这个属性引用了一个对象,这个对象就是原型对象。原型对象初始化的时候是空的,我们可以在里面自定义任何属性和方法,这些方法和属性都将被该构造函数所创建的对象继承。

  在原型中添加属性和方法可以参照如下代码:

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()方法
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 = '湖北武汉';//在原型中添加属性
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);//'undefined'
user2.addr = '武汉';
alert(user2.addr);//'武汉'

  从上面的代码可以看出,如果我们同时申明了对象属性、原型属性和实例属性,那么调用时显示的优先级应该是:实例属性>对象属性>原型属性。这就是采用了就近原则:调用时首先查找实例中是否直接定义了这个属性,有则返回实例属性;如果实例属性中没有就去构造函数中查找,有则返回;如果前面两者都没有就去原型对象中查找,如果没有则返回undefined。

  二 动态原型模式

  有人可能会觉得上面代码中的写法感觉很别扭,因为原型中的方法和属性与构造函数中定义的对象属性和方法不在一块儿,要是能封装在一起就更加直观,如果要解决这个问题,就要用到动态原型模式;

//动态原型模式
function User(name,age){//构造方法
this.name = name;//属性
this.age = age;
this.addr = '湖北恩施';
User.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

  上面的代码看起来要更加直观。但是这样还是会有一些小的问题,就是我们在创建多个实例的时候,没创建一个实例就会在原型中重新创建一次原型中的方法。先来测试一下:

alert('开始创建show……');
User.prototype.show = function(){//在原型中添加方法
alert(this.name+'|'+this.age+'|'+this.addr);
};
alert('结束创建show……');

  如果我们添加上面的alert(),运行时发现,没创建一个实例都会弹出两次对话框。这就证明了上面提到的重新创建的问题,虽然这样来说空间没有额外增加,但是时间却是增加了,因为每次都要重新创建。

  要解决这个问题,我们的思路是:首先判断show方法是否存在,如果不存在则创建,如果已经存在就不在重新创建。改进代码如下:

if(this.show==undefined){//如果run方法还没有被创建
alert('开始创建show……');
User.prototype.show = function(){//在原型中添加方法
alert(this.name+'|'+this.age+'|'+this.addr);
};
alert('结束创建show……');
}

  运行发现,不管创建多少个实例都只会弹出两次对话框,这样就避免了不必要的开销。

  三 使用字面量方式创建原型

  除了上面提到的创建原型的方式,我们还可以用字面量方式创建,代码如下:

//使用字面量方式创建原型
function User(name,age){//构造方法
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();

  这里要说明的是:使用字面量方式创建后,不能再使用字面量的方式重写原型,一旦重写了原型,原来的原型中定义的所有属性和方法都将被清除。如下:

//使用字面量方式创建原型
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);
user1.show();//返回 undefined
user2.show();

  可见,一旦我们重写了原型,那么开始原型中定义的变量和方法都没有保存下来。但是,我们说的是不能用字面量的方式重写原型,那我们可不可以添加新的方法或者属性呢?答案是可以的,比如:

User.prototype.addr1 = '武汉'; 

  这样就不会清楚原来原型中定义的方法和属性了。

  四 总结

  这里主要是介绍了原型的一些基本的知识,原型可以用来实现方法和属性的共享,也可以用来扩展对象的方法。比如我们可以用原型方法来扩展内置对象String的方法,让它具有VB的left()/right()功能,是实现截取字符串左边或者右边的功能。

Javascript中的对象和原型的更多相关文章

  1. Javascript中的对象和原型(3)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  2. Javascript中的对象和原型(三)(转载)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  3. Javascript中的对象和原型(一)(转载)

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  4. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  5. JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记(四)

    一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...

  6. Javascript中的对象和原型(二)(转载)

    上一篇中提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论. 一 工厂模式 我们知道,要创建一个对象我们可以用如下代码: var user = new Object(); // ...

  7. JavaScript内置对象与原型继承

    (一)   理解JavaScript类定义 1>关于内置对象理解 console.log(Date.prototype.__proto__===Object.prototype    //tru ...

  8. JavaScript中判断对象类型方法大全1

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  9. (转)javascript中的对象查找

    本文转自:http://otakustay.com/object-lookup-in-javascript/  ---很棒的一篇文章,作者的其他文章还暂时没读,但相信作者是一个谦虚 谨慎的好工程师 近 ...

随机推荐

  1. 转:Spine.JS+Rails重客户端Web应用技术选型思路:『风车』架构设计

    原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...

  2. day03_javaEE四成结构

  3. Valve开源了Direct3D到OpenGL的转译层,方便开发者迁移游戏到Linux(面向游戏玩家的六款最佳 Linux 发行版)

    Valve开源了Direct3D到OpenGL的转译层,方便开发者迁移游戏到Linux:https://github.com/ValveSoftware/ToGL Valve SteamBox主机系统 ...

  4. 32G sd卡格式化成fat

    fat文件系统格式只支持4G及以下的内存空间的存储设备,对于4G及以上的存储设备可以使用fat32或ntfs文件系统,建议使用ntfs文件系统,这样可以最有效地利用存储设备的存储空间,而且可以减少出现 ...

  5. Activity — 4 launch mode

    launchMode在多个Activity跳转的过程中扮演着重要的角色,它可以决定是否生成新的Activity实例,是否重用已存在的Activity实例,是否和其他Activity实例公用一个task ...

  6. HDU_2036——多边形面积,行列式计算

    Problem Description “ 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一亩三分地. 谢谢!(乐队奏乐)”话说部分学生心态极好,每天就知道游戏,这次考试如此简单的题目,也 ...

  7. hdu4111 Alice and Bob

    Alice and Bob Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. oracle修改服务器端编码

    因为装的是oracle 11g免费版,没有装oracle客户端,然后从网上找了免客户端使用pl/sql的教程,具体可以看链接,这里不再累述:但打开pl/sql的时候提示客户端和服务端编码不一致:网上一 ...

  9. [小知识] 获取浏览器UA标识

    这个随笔纯粹是小知识的积累,以后都会打上小知识的标签. 经常见的,下载移动app时,只有一个二维码,但扫码后,会根据手机是iphone还是android下载不同app,下面就是这个操作的代码: < ...

  10. 【顽固BUG】Visual Studio 2013 + TestDriven.NET-3.8.2860_Personal_Beta 调用的目标发生了异常。

    前言 突然怎么弄也无法断点调试了 输出如下: ------ Test started: Assembly: Server5.V2.dll ------ 调用的目标发生了异常. 而且网站运行提示: -- ...