返回织梦建站服务网首页 业界新闻 教程文档 资源下载 酷站鉴赏 免费服务 站长工具
织梦建站工作室
织梦建站论坛
载入中…
专题栏目
最新热门
>>更多热门...  
最新推荐
>>更多推荐...  
  您现在的位置: 织梦建站服务网 >> 建站教程 >> 网页制作 >> Js\网页特效 >> 教程正文
面向对象的 javascript            
HITS: TIME:2007-7-19 17:15:35 AUTHOR:mozart0 URL:蓝色理想
CONTENT INTRODUCE :
放大文字  缩小文字  发表评论  加入站内收藏夹  告诉好友  打印模式  关闭窗口 

阅读前Pro Javascript Techniques翻译连载说明和目录

  JavaScript的演化是渐进而稳固的。历经过去十年的进程,JavaScript在人们的认知里已经从一门简单的玩物式的语言逐渐发展成为一门倍受推崇的编程语言,被全世界的公司和开发者用来构造种种不可思议的应用。现代JavaScript编程语言一如既往地可靠、健壮,强大得令人难以置信。在本书中我进行的许多论述,将揭示是什么使得现代JavaScript应用程序与从前有着那么明显的不同。本章中出现的许多概念远不能算新奇,然而成千上万聪明的程序员的认同促使它们的运用得以升华并最终形成今天的格局。既如此,我们干脆这就来着眼现代JavaScript程序设计。

第二章:面向对象的Javascript

  理解本章概念的大纲的重要性是不容忽视的。本章的前半部分,让你对于JavaScript语言怎样运作和怎样最好地它用一个良好的理解,这是完全掌握专业地使用JavaScript的出发点。彻底地理解对象怎样运作、引用怎样处理、作用域怎样确定,将会毫无疑问地改变你编写JavaScript代码的方式。
  有了广博的JavaScript编码技能,编写干净的面向对象JavaScript代码的重要性将会变得更加明显。本章的后半部分里我论述了怎样着手编写种种面向对象的代码以适应来自其它编程语言阵营的任何人。现代JavaScript正是基于这些技能,给予你开发新型的创新的应用程序时巨大的优势。

  引用

  JavaScript的一个重要的方面是引用的概念。引用就是指向对象实际位置的指针。这是一项极其强大的功能。前提是,实际的对象决不是一个引用:字符串总是一个字符串,数组总是一个数组。然而,多个变量可以引用相同的对象。JavaScript就是以这种引用引用机制为基础。通过维护一系列的指向其它对象的引用,语言为你提供了更大的弹性。
  另外,对象能包括一系列的属性,这些属性简单地引用其它对象(如字符串,数字,数组等等)。当几个变量指向相同对象时,修改底层对象类型将会在所有的指点向它的变量上有所反映。例2-1即此一例,两个变量指向同一个对象,但是对对象内容的修改的反映是全局的。

  程序2-1. 多变量引用单个对象的示例

//设置obj为一个空对象
var obj = new Object();

//objRef现在引用了别的对象
var objRef = obj;

//修改原始对象的属性
obj.oneProperty = true;

//我们可以发现该变化在两个变量中都可以看到
//(因为他们引用了同一个对象)
alert( obj.oneProperty === objRef.oneProperty );

  我从前提到过自更改的对象在JavaScript里非常少见的。让我们看一个发生这一状况的实例。数组对象能够用push方法给它自己增加额外的项。因为在数组对象的核心,值是作为对象的属性存储的,结果类似程序2-1中的情形,一个对象成为全局被改动的(导致了多个变量的值被同时改变)。见程序2-2.

  程序2-2. 自修改对象的例子

//创建一组项目的数组
var items = new Array( "one", "two", "three" );

//创建一个对项目数组的引用
var itemsRef = items;

//给原始数组添加一项
items.push( "four" );

//两个数组的长度应该相同,
//因为它们都指向相同的数组对象
alert( items.length == itemsRef.length );

  记住这一点是很重要的:引用总是只指向最终被引用的对象,而不会是引用本身。例如,在Perl语言里,很可能有一个引用指向另一个也是引用的变量。但在JavaScript里,它会沿着引用链向下追溯直到指向核心的对象。程序2-3演示了这种情形,物理的目标已经改变而引用仍然指向原来的对象。

  程序2-3. Changing the Reference of an Object While Maintaining Integrity(见#9 oerrite 的回复)

// 设置items为一个字符串的数组(对象)
var items = new Array( "one", "two", "three" );

// 设置itemsRef为对items的引用
var itemsRef = items;

//让items指向一个新的对象
items = new Array( "new", "array" );

// items和itemsRef现在指向不同的对象
// items指向new Array( "new", "array" )
// itemsRef则指向new Array( "one", "two", "three" )
alert( items !== itemsRef );

  最后,让我们来看一个陌生的例子,表面似乎是一个自修改的对象,却作用于一个新的未被引用的对象。当执行字符串串联时,结果总是一个新的字符串对象,而非原字符串更改后的版本。这在程序2-4中可以看出。

  程序2-4. 对象修改作用于一个新的对象而非自修改对象的示例

//让item等于一个新的字符串对象
var item = "test";

//itemRef也引用相同的字符串对象
var itemRef = item;

//在字符串对象上串联一个新的对象
//注意:这创建了一个新的对象,并不修改初始对象
item += "ing";

//item和itemRef的值并不相等,因为
//一个全新的对象被创建了
alert( item != itemRef );

  如果你刚刚接触,引用可能是个令人头大的刁钻话题。然而,理解引用是如何工作的对于编写良好、干净的JavaScript代码是极其重要的。接下来的几节我们将探究几种未必新鲜和令人激动的,但是同样对编写良好、干净的代码很重要的特性。

  函数重载和类型检查

  其它面向对象的语言(比如Java)的一种共有的特性是“重载”函数的能力:传给它们不同数目或类型的参数,函数将执行不同操作。虽然这种能力在JavaScript中不是直接可用的,一些工具的提供使得这种探求完全成为可能。
  在JavaScript的每一个函数里存在一个上下文相关的名为arguments的变量,它的行为类似于一个伪数组,包含了传给函数的所有参数。参数不是一真正的数组(意味着你不能修改它,或者调用push()方法增加新的项),但是你可以以数组的形式访问它,而且它也的确有一个length属性。程序2-5中有两个示例。

  程序2-5. JavaScript中函数重载的两个示例

//一个简单的用来发送消息的函数
function sendMessage( msg, obj ) {
    //如果同时提供了一个消息和一个对象
    if ( arguments.length == 2 )
        //就将消息发给该对象
        obj.handleMsg( msg );

    //否则,刚假定只有消息被提供
    else
        //于是显示该消息
        alert( msg );
}

//调用函数,带一个参数 – 用警告框显示消息
sendMessage( "Hello, World!" );

//或者,我们也可以传入我们自己的对象用
//一种不同方式来显示信息
sendMessage( "How are you?", {
    handleMsg: function( msg ) {
        alert( "This is a custom message: " + msg );
    }
});

//一个使用任意数目参数创建一个数组的函数
function makeArray() {
    //临时数组
    var arr = [];
    //遍历提交的每一个参数
    for ( var i = 0; i < arguments.length; i++ ) {
        arr.push( arguments[i] );
    }
    //返回结果数组
    return arr;
}

  另外,存在另一种断定传递给一个函数的参数数目的方法。这种特殊的方法多用了一点点技巧:我们利用了传递过来的任何参数值不可能为undefined这一事实。程序2-6展示一了个简单的函数用来显示一条错误消息,如果没有传给它,则提供一条缺省消息。

  程序2-6: 显示错误消息和缺省消息

function displayError( msg ) {
    //检查确保msg不是undefined
    if ( typeof msg == 'undefined' ) {
        //如果是,则设置缺省消息
        msg = "An error occurred.";
    }

    //显示消息
    alert( msg );
}

  typeof语句的使用引入了类型检查。因为JavaScript(目前)是一种动态类型语言,使得这个话题格外有用而重要的话题。有许多种方法检查变量的类型;我们将探究两种特别有用的。
  第一种检查对象类型的方式是使用显式的typeof操作符。这种有用的方法给我们一个字符串名称,代表变量内容的类型。这将是一种完美的方案,除非变量的类型或者数组或自定义的对象如user(这时它总返回"ojbect",导致各种对象难以区分)。
  这种方法的示例见程序2-7

  程序2-7. 使用typeof决定对象类型的示例

//检查我们的数字是否其实是一个字符串
if ( typeof num == "string" )
    //如果是,则将它解析成数字
    num = parseInt( num );

//检查我们的数组是否其实是一个字符串
if ( typeof arr == "string" )
    //如果是,则用逗号分割该字符串,构造出一个数组
    arr = arr.split(",");

  检查对象类型的第二种方式是参考所有JavaScript对象所共有的一个称为constructor的属性。该属性是对一个最初用来构造此对象的函数的引用。该方法的示例见程序2-8。

  程序2-8. 使用constructor属性决定对象类型的示例

//检查我们的数字是否其实是一个字符串
if ( num.constructor == String )
    //如果是,则将它解析成数字
    num = parseInt( num );

//检查我们的字符串是否其实是一个数组
if ( str.constructor == Array )
    //如果是,则用逗号连接该数组,得到一个字符串
    str = str.join(',');

  表2-1显示了对不同类型对象分别使用我所介绍的两种方法进行类型检查的结果。表格的第一列显示了我们试图找到其类型的对象。每二列是运行typeof Variable(Variable为第一列所示的值)。此列中的所有结果都是字符串。最后,第三列显示了对第一列包含的对象运行Variable.constructor所得的结果。些列中的所有结果都是对象。
  表2-1. 变量类型检查
  ———————————————————————————————
  Variable     typeof Variable  Variable.constructor
  ———————————————————————————————
  {an:"object"}   object       Object
  ["an","array"]    object       Array
  function(){}    function      Function
  "a string"      string        String
  55         number       Number
  true       boolean       Boolean
  new User()    object       User
  ——————————————————————————————————
  使用表2-1的信息你现在可以创建一个通用的函数用来在函数内进行类型检查。可能到现在已经明显,使用一个变量的constructor作为对象类型的引用可能是最简单的类型检查方式。当你想要确定精确吻合的参数数目的类型传进了你的函数时,严格的类型检查在这种可能会大有帮助。在程序2-9中我们可以看到实际中的一例。
  
  程序2-9. 一个可用来严格维护全部传入函数的参数的函数

//依据参数列表来严格地检查一个变量列表的类型
function strict( types, args ) {

    //确保参数的数目和类型核匹配
    if ( types.length != args.length ) {
        //如果长度不匹配,则抛出异常
        throw "Invalid number of arguments. Expected " + types.length +
            ", received " + args.length + " instead.";
        }

    //遍历每一

[1] [2] [3] [4] 下一页

教程录入:jerome    责任编辑:jerome 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口

    相关教程
    用javascript 转换外部链接样式
    用javascript实现select的美化
    javascript 的事件冒泡 demo
    现代 javscript 编程
    OOP编程实例——音乐播放器
    flash8与javascript集成
    AS3.0概要–了解AS3.0的改变
    了解在Flash中的编程工作
    javascript 和 Flash 的通信
    CSS+JS构建的图片查看器
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    湘ICP备05010790号 {$Wap}
    关于我们 | 版本历史 | 联系方法 | 隐私条例 | 链接我们 | 广告服务 | 常见问题 | 友情链接 | 网站公告 | 设为首页 | 收藏本站
    Copyright © 2001-2006 17zm.NET All Rights Reserved.  织梦建站工作室[织梦建站工作室]™荣誉出品. Since 2001