javascript 面向对象编程 聊聊对象的事

先看一下JSON(javascript object notation)对象，JSON是一种脚本操作时常用的数据交换格式对象，相对于XML来说JSON是一种比较轻量级的格式，在一些intelligence的IDE中还可以方便的通过点操作JSON对象中的成员。

JSON是一种键/值对方式来描述内部成员的格式，其内部成员可以是几乎任何一种类型的对象，当然也可以是方法、类、数组，也可以是另外一个JSON对象。

    var student = {

      Name: "张三",

      Age: 20,

      Hobby: "读书",

      Books: [

        {

          BookName : "C#" ,

          Price : 70

        },

        {

          BookName : "Java" ,

          Price : 70

        },

        {

          BookName : "Javascript" ,

          Price : 80

        }

      ]

    };

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

上面代码用JSON对象描述了一个学生的信息，他有姓名、年龄、爱好、书集等。在访问该学生对象时，可以通过student变量来操作学生的信息。

    var stuInfo = "姓名:" + student.Name +

           "，年龄:" + student.Age +

           "，爱好:" + student.Hobby +

           "，拥有的书:" +

                      student.Books[0].BookName + "、" +

           student.Books[1].BookName + "、" +

                      student.Books[2].BookName;

     alert(stuInfo);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

这样的操作方式风格和C#也非常相像。以上的代码是静态的构造出了学生对象，学生对象的结构就确定了。在其它的编程语言中一般对象结构一旦确定就不能很方便的进行修改，但是在javascript中的对象结构也可以方便的进行改动。下面为student对象添加一个Introduce方法来做自我介绍。

    student.Introduce = function() {

      var stuInfo = "姓名:" + this.Name +

             "，年龄:" + this.Age +

             "，爱好:" + this.Hobby +

             "，拥有的书:" +

             this.Books[0].BookName + "、" +

             this.Books[1].BookName + "、" +

             this.Books[2].BookName;

      alert(stuInfo)

    };

    student.Introduce();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
      student对象原来并没有Introduce方法，第一次为student.Introduce赋值会在student对象中创建一个新的成员，后面如果再为student.Introduce赋值则会覆盖上一次所赋的值。当然我们这的值是一个function。也可以用类似索引的方式来添加成员。

    student["Introduce"] = function() {

     ……

    };

    student.Introduce();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

当然添加的成员也可以删除掉。删除掉之后则成为undefined，再访问该成员时则不支持。

    delete student.Introduce;

    student.Introduce();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

javascript是弱类型的语言，有的时候即使有IDE的辅助也不能很清楚知道当前所操作对象的成员，可能会需要对当前对象的属性进行查询，这时候我们可以使用for循环来完成。

    for (var key in student) {

      document.write(key + " : " + student[key] + "<br />");

    };

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

对student对象进行遍历时，是对student的成员进行遍历，这里的key则对应student对象中的每一个成员属性名称。student[key]则是对student某个成员进行访问。如果想调用student的Introduce方法也可以用索引的方式，student[“Introduce”]()。

上面简单的聊了聊JSON对象，总的来说JSON是很方便的数据打包方式。javascript中的其它的对象，不论是浏览器对象，还是自定义类型所创建的对象或者是数组等等，它们也都具有JSON对象类似的操作方式。我们可以直接用索引的方式为window添加成员，我们也可以为数组添加字符串形式的下标把它当成Hashtable来操作。

    window["Hi"] = function() {

      alert("helloworld!");

    };

    window["Hi"]();

    var array = [];

    array["一"] = "A";

    array["二"] = "B";

    array["三"] = "C";

    array["四"] = "D";

    alert(array["一"] + array["二"] + array["三"] + array["四"]);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

把数组当成Hashtable来操作时，要注意，并非是为数组添加数组元素，而是在数组对象中添加新的属性成员。而且如果for(var key in array)循环遍历数组对象的话，key得到的却不是array对象的属性名称，而是数组元素的索引号。

下一次聊聊function。