JavaScrip创建自己的对象

原创 2006年06月24日 23:32:00
       使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作。
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象,而后再为该对象创建一个实例。这个实例就是一个新对象,它具有对象定义中的基本特征。

一、对象的定义

JavaScript对象的定义,其基本格式如下:

Function Object(属性表)

  • This.prop1=prop1

    This.prop2=prop2

    ...

    This.meth=FunctionName1;

    This.meth=FunctionName2;

    ...

  • 在一个对象的定义中,可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关于University对象的定义:

    Function university(name,city,creatDate URL)

  • This.name=name

    This.city=city

    This.creatDate=New Date(creatDate)

    This.URL=URL

  • 其基本含义如下:

      •  
      • Name-指定一个“单位”名称。
      •  
      • City-“单位”所在城市。
      •  
      • CreatDate-记载university对象的更新日期。
      •  
      • URL-该对象指向一个网址。

     

     

    二、创建对象实例

    一旦对象定义完成后,就可以为该对象创建一个实例了:

  • NewObject=New object();
  • 其中Newobjet是新的对象,Object已经定义好的对象。例:

    U1=New university(“云南省”,“昆明市”,"January 05,199712:00:00","http://www.YN.KM")

    U2=New university(“云南电子科技大学”,“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")

     

     

    三、对象方法的使用

    在对象中除了使用属性外,有时还需要使用方法。在对象的定义中,我们看到This.meth=FunctionName语句,那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName,通过它实现自己的意图。

    例在university对象中增加一个方法,该方法是显示它自己本身,并返回相应的字串。

    function university(name,city,createDate,URL)

  • This.Name=Name;

    This.city=city;

    This.createDate=New Date(creatDate);

    This.URL=URL;

    This.showuniversity=showuniversity;

  • 其中This.showuniversity就是定义了一个方法---showuniversity()。

    而showuniversity()方法是实现university对象本身的显示。

    function showuniversity()

  • For (var prop in this)

    alert(prop+="+this[prop]+"");

  • 其中alert是JavaScript中的内部函数,显示其字符串。

     

     

    四、JavaScript中的数组

    1.  
    2. 使用New创建数组
    3. JavaScript中没有提供像其它语言具有明显的数组类型,但可以通过function定义一个数组,并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。

      a、定义对象的数组

      Function arrayName(size){

      This.length=Size;

      for(var X=; X<=size;X++)

      this[X]=0;

      Reture this;

      }

      其中arrayName是定义数组的一个名子,Size是有关数组大小的值(1-size),即数组元素的个数。通过for循环对一个当前对象的数组进行定义,最后返回这个数组。

      从中可以看出,JavaScript中的数组是从1到size,这与其它0到size的数组表示方法有所不同,当然你可根据需要将数组的下标由1到size调整到0到size-1,可由下列实现:

      Function arrayName (size)

      For (var X=0; X<=size;X++)

      this[X]=0;

      this.lenght=size;

      Return this;

      从上面可以看出该方法是只是调整了this.lenght的位置,该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由1到size,使得JavaScript中的对象功能更加强大。

      b、创建数组实例

      一个数组定义完成以后,还不能马上使用,必须为该数组创建一个数组实例:

      Myarray=New arrayName(n);

      并赋于初值:

      Myarray[1]=“字串1”;

      Myarray[2]=“字串2”;

      Myarray[3]=“字串3”;

      ...

      Myarray[n]=“字串n”;

      一旦给数组赋于了初值后,数组中就具有真正意义的数据了,以后就可以在程序设计过程中直接引用。

    4. 创建多维数组
    5. Function creatMArray(row,col){

      var indx=0;

      this.length=(row*10)+col

      for(var x=1;x<=row;x++)

      for(var y=1;y<=col;y++)

      indx=(x*10)+y;

      this[indx]=””;

      }

      myMArray=new creatMArray();

      之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、

      …来引用。

    6. 内部数组
  • 在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
  • Bullet3.gif (148 字节) anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。

    Bullet3.gif (148 字节) links[]: 使用<A href=”URL”>来定义一个越文本链接项。

    Bullet3.gif (148 字节) Forms[]: 在程序中使用多窗体时,建立该数组。

    Bullet3.gif (148 字节) Elements[]:在一个窗口中使用从个元素时,建立该数组。

    Bullet3.gif (148 字节) Frames[]:建立框架时,使用该数组

    Bullet3.gif (148 字节) anchors[]用于窗体的访问(它是通过《form name=“form1”》所指定的),link[]用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms[]反映窗体的属性,而anchors[]反映Web页面中的链接属性。

  • 有关锚数组的文档:

    <HTML>
    <HEAD>
    <BODY>
    <A NAME=”MyAnchorsName1”> 定义第一个锚名
    HTML Code
    <A NAME=”MyAnchorsName2”> 定义第二个锚名
    HTML Code
    <A HREF=”#MyAnchorsName1”>建立锚的链接
    <A HREF=”#MyAnchorsName2”> 建立锚的链接
    …. 

    该文档段建立了两面全锚的链接,可通过Anchors[]访问这些锚。document.Anchors[0]反映第一个锚,而document.Anchors[1]反映第二个锚的有关信息。

     

    五、范例

    范例1:一个动态文字滚动的例子。

    test5_1.htm

    <html>
    <head>
    <title></title>
    <script LANGUAGE="JavaScript">
     
    with (top.window.location)
    {baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}
    total_toc_items = 0;
    current_overID = "";
    last_overID = "";
    browser = navigator.appName;
    version = parseInt(navigator.appVersion);
    client=null;
    loaded = 0;
    if (browser == "Netscape" && version >= 3) 
        client = "ns3";
    function toc_item (img_name,icon_col,width,height) {
    if (client =="ns3") {
    img_prefix = baseURL + img_name;
    this.icon_col = icon_col;
    this.toc_img_off = new Image (width,height);
    this.toc_img_off.src = img_prefix + "_off.gif";
    this.toc_img_on = new Image (width,height);
    this.toc_img_on.src = img_prefix + "_on.gif";
    }
    }
     
    function new_toc_item (img_name,icon_row,width,height) {
    toc_item [img_name] = new toc_item (img_name,icon_row,width,height);
    }
     
    function toc_mouseover (itemID) {
    if (client =="ns3") {
    current_overID = itemID;
    if (current_overID != last_overID) {
    document [current_overID].src = toc_item [current_overID].toc_img_on.src;
    if (last_overID != "") {
    document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;
    }
    last_overID = current_overID;
    }
    }
    }
     
    function toc_mouseout () {
    if (client =="ns3") {
    if (current_overID != "") {
    document.images [current_overID].src = 
     toc_item [current_overID].toc_img_off.src;
    }
    current_overID = "";
    last_overID = "";
    }
    }
    new_toc_item ("1",2,120,20);
    <!-- Begin
    function bannerObject(p){
    this.msg = MESSAGE
    this.out = " "
    this.pos = POSITION
    this.delay = DELAY
    this.i = 0
    this.reset = clearMessage}
     
    function clearMessage(){
    this.pos = POSITION}
    var POSITION = 50;
    var DELAY = 150;
    var MESSAGE = "这是一个动态JavaScript文字显示的例子";
    var scroll = new bannerObject();
    function scroller(){
    scroll.out += " ";
    if(scroll.pos>0)
    for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) 
             { scroll.out +=" " ; }
    if (scroll.pos>= 0)
    scroll.out += scroll.msg
    else
    scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
    document.noticeForm.notice.value = scroll.out
    scroll.out = " ";
    scroll.pos--;
    scroll.pos--;
    if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout
    ('scroller()',scroll.delay);}
    </script>
    </head>
    <body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"
    alink="#008080"
    text="#C0C0C0">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100%"><form NAME="noticeForm">
    <p><input TYPE="text" name="notice" size="40" 
      style="background-color: rgb(192,192,192)"></p>
    </form>
    </td>
    </tr>
    </table>
    </center></div>
    </body>
    </html>
     

    范例2:颜色变化的例子。

    test5_2.htm

    <html>
    <head>
    <script>
    <!--
    function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
    this[i] = 0;
    return this;}
    hexa = new makearray(16);
    for(var i = 0; i < 10; i++)
    hexa[i] = i;
    hexa[10]="a";
    hexa[11]="b";
    hexa[12]="c";
    hexa[13]="d";
    hexa[14]="e";
    hexa[15]="f";
    function hex(i) {
    if (i < 0)
    return "00";
    else if (i > 255)
    return "ff";
    else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
    function setbgColor(r, g, b) {
    var hr = hex(r);
    var hg = hex(g);
    var hb = hex(b);
    document.bgColor = "#"+hr+hg+hb;}
    function fade(sr, sg, sb, er, eg, eb, step) {
    for(var i = 0; i <= step; i++) {
    setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),
    Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *
    ((step-i)/step) + eb * (i/step))); }}
    function fadein() {
    fade(255,0,0,0,0,255,100);
    fade(0,0,255,0,255,0,100);
    fade(0,255,0, 0,0,0, 100);}
    fadein();
    // -->
    </script>
    <body>
    </body>
    </html>

    相关文章推荐

    javascrip将对象转换成json字符串

    将javascript对象转换成json字符串,扩展了Object的方法。 资源下载地址: http://download.csdn.net/detail/w172087242/9575125 下...

    javascrip对象的新理解

    Javascript是面向对象的编程语言,对象是javascript中最重要的概念。 可以使用声明集合的方式声明创建一个对象: var student = {name: '小明', age: 2...

    javascrip对象与数组参考大全

    • 2008年11月14日 10:26
    • 54KB
    • 下载

    关于 javascrip 变量作用域深入理解的好文章 与 面向对象编程的好文章

    js的作用域问题,一直都很是困扰人,看完这个文章之后相信会好很多。前提是耐心的看完。 第二篇是js的面向对象编程的好文章这个建议原来地址的,因为排版很好(http://www.gracecode.co...
    • apoxlo
    • apoxlo
    • 2011年05月12日 16:38
    • 504

    JAVAScrip 介绍 DOM对象 BOM对象

    1. JavaScript的概述 是基于对象和事件驱动的语言,应用于客户端(浏览器) 解释: 对象的概念的源于java,但是java 需要自己去创建,但是在JS的编程中已经提供的...

    Javascrip的应用

    Window对象 window对象代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window。 比如window.alert(‘a’)可以省略成alert(‘aa’)。 1、...

    用javascrip在asp.net中窗口相关操作总结

    这些代码全部写在和页面分离的代码页中(codebehind),如果要嵌入到*.aspx页面,可能会出现问题.  1.打开新窗口  这个简单:Response.Write(@"    language=...

    Android与JavaScrip进行交互(二)

    一、思路分析 经过测试发现,JS中的点击事件只能写一个,如果写了多个,也只会响应第一个,如果写的方法是android端的方法,在web端运行时,后台会报未定义这个方法的错误,前台点击无响应。 所以,如...

    JavaScrip学习之旅(6) JavaScript函数

    转载请标明是引用于 http://blog.csdn.net/chenyujing5678  欢迎拍砖!     1、函数定义以function开头,不需要声明返回类型、参数类型 因为JS是...

    JavaScrip学习之旅(1)Javascript简介

    转载请标明是引用于 http://blog.csdn.net/chenyujing5678  欢迎拍砖!   HTML网页没有计算、判断能力,如果所有计算、判断(比如文本框是否为空、判断两次密码...
    内容举报
    返回顶部
    收藏助手
    不良信息举报
    您举报文章:JavaScrip创建自己的对象
    举报原因:
    原因补充:

    (最多只允许输入30个字)