您现在的位置: 365建站网 > 365学习 > [翻译文章]javascript的对象(how javascript objects works?)

[翻译文章]javascript的对象(how javascript objects works?)

文章来源:365jz.com     点击数:193    更新时间:2009-09-16 11:39   参与评论

英文原文

本文主要讲以下三点:
  • JavaScript对象就是哈希表,用.访问属性和用下标访问是一样的。
  • function只是特别的对象而已。
  • 用JSON创建对象。

构建简单的对象

javascript的对象可以完全看做是哈希表。属性和方法是哈希表的表项,其中属性名和方法名是哈希表的键值。javascript对象的方法也是属性,只不过这个属性的值恰好是函数类型而已。(A javascript object’s methods are just a property that happen to be a function.)

请看下面的代码:

var rufus = new Object();
rufus.name = "rufus";
rufus.species = "cat";
rufus.hello = function() { alert("miaow"); }

javascript 的对象是动态的,在使用属性之前不必去先声明。在运行时你可以随意的去给以个对象新增属性,你所要做的就是直接为新属性赋值就可以了。同时,所有相同类型的对象可以共享对象的实现方法而不必像C#或java那样显式的声明对象的数据类型,javascript是通过构造函数(constructor function)和对象原型(object prototypes)来实现的。

请注意在上面的代码中我们赋给rufus对象的hello属性是一个函数,而不是像字符串或者数字那样的基本数据类型。这之所以成为可能是因为在javascript中,函数只不过是一类特殊的对象而已。本质上和字符串,数字等基本数据类型是一样的。还是那句话,javascript对象的方法也是属性,只不过这个属性的值恰好是函数类型而已。(A javascript object’s methods are just a property that happen to be a function.)

rufus的hello属性石一个匿名方法(anonymous functions),在我们把它赋给rufus的hello属性之前我们不用去声明它,同时,这个方法是没有名字的。

.语法 vs. 下标语法 (Dot syntax vs subscript syntax)

javascript中的对象就是哈希表,就是 键/值 对而已,没有什么特别的。一个有力的证明就是你既可以像传统的访问对象属性那样使用 对象名.属性名 的做法,也可以像访问哈希表那样直接用 对象名.下标 的做法。

因此上面的代码也可以这样写:

var casper = new Object();
casper["name"] = "casper";
casper["species"] = "bird";
casper["hello"] = function() { alert("squark! squark!"); }

两种语法是对同一件事的不同描述而已,其本质是一样的,甚至你可以两种方法混用。不过推荐使用 点语法 ,因为这样访问对象的属性对于c#和java等语言的程序员来说看起来更自然一些。

有些情况使用下标这种语法更有优势,因为使用下标访问属性时,使用字符串来检索属性名的。这样我们可以再运行时动态构建这样的字符串来访问对象的属性和方法。

以下代码演示了使用foreach循环来遍历rufus对象的属性,和for循环动态访问myObject的三个属性。

for(var property in rufus)
    alert(rufus[property].toString());
var myObject = {
    property1: "chocolate",
    property2: "cake",
    property3: "brownies"
}
for(var x=1; x<4; x++)
    alert(myObject["property" + x]);

对象的字面值(object literal syntax)

在例一中我们通过Object的构造函数生成了一个对象。有一种更快的方法(打更少的字)来建立一个对象,那就是通过对象的字段值 。

一种简单的方法是直接将一对大括号赋值给一个变量就可以了,这等同于调用了Object的构造函数。代码如下:

var empty1 = {}; // 和下一行等效,但是录入时更快。
var empty2 = new Object();

字面值还可以用来设置对象的属性,要设置的属性以 键/值 对的形式建立(就是JSON)。如果你在创建对象时有一大堆属性要创建,那么这个特性是很有用的,请看下例:

这个例子和例一的效果是一样的。

var sabby = {
     name : "Sabby",
     species: "cat",
     hello : function() { alert("hissss"); }
};

什么时候有用?(when is this useful?)

一般情况下,当你想要在脚本中传递一组相关的变量时,创建这样的小对象很有用。

假设这样一种情形,你正在使用一个类库,这个类库支持自定义事件,你想要传递事件相关的一些信息给事件处理程序,你应该怎么去做呢?这时你可以写很多行代码,来创建对象,并且为对象的属性赋值,当然,你也可以通过使用对象的字段量(JSON),通过一行代码来搞定。通常情况下,这对于事件处理程序来说是没有区别的。如下:

this.fireEvent({element: navigationElement, state : "active" });
…?
function onNavigationStateChange(e){
    // do something here
    alert(e.element.id + " is " + e.state);
}

另外,当你要创建一系列相关的库函数时(和在C#中创建一个仅包含静态方法的类很类似),简单对象(特别是通过JSON来创建对象)是很有用的。

以下是一个简单的ArrayHelper类:

var ArrayUtil = {
    contains : function(array, element)
    {
        for(var x=0; x<array .length; x++)
        {
            if(array[x] == element) 
               return true;
        }
        return false;
    },
    exclude : function(list, items)
    {
        …?
    },
    makeList : function(list)
    {
        …?
    }
}
var list = ["A", "B", "C"];
alert("Has A? " + ArrayUtil.contains(list, "A"));

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (193人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------