日期:2014-05-16  浏览次数:20320 次

学习面向对象javascript(四)对象

?

?

?

?

之前,我们已经学习了javascript的基本数据类型,数组和函数。在下面的文章中,我们会了解到一些关于对象的知识。比如如何创建和使用对象,以及对象的构造函数等。

?

从数组到对象

我们大家都知道,数组就是一序列元素的组合,每一个元素有他对应的数字索引,从0依次递增。
对象和数组很相似,不同的是对象的索引是由你自己来定义的。索引不局限于用数字来表示,可以用比较好记的关键字来表示。作为对象的属性名。比如:

var hero = {
  breed: 'Turtle', 
  occupation: 'Ninja'
};

?

在这个对象中,包含了两个属性名,也就是索引 ,"breed" "occupation"

在对象中,属性名可以用单引号或者双引号引起来,也可以不加。比如:

var o = {prop: 1};
var o = {"prop": 1};
var o = {'prop': 1};

一般的,为了节约js文件的大小,通常把引号省略了。但是在有些情况下,又必须加:

  • 如果属性的名字是javascript的保留字时,必须加引号;
  • 如果属性的名字中包含空格或者(数字、字母、下划线)以外的字符,必须加引号;
  • 如果属性名以数字开头时,也必须加引号。

总之,如果你使用的属性名不符合javascript中变量名的定义的话,你都必须加引号。比如:

var o = {
  something: 1, 
  'yes or no': 'yes', 
  '!@#$%^&*': true
};

在定义对象时,你可以用 [] 或者 {} 来定义。用 [] 的方式叫做数组字面标记法,用 {} 的方式叫做对象字面标记法。

元素,属性,方法

当我们说数组时,你可能会说数组中包含元素,当我们说对象时,你可能会说对象中包含属性。这在javascript中,并没有什么区别。
一个对象的属性可以是一个方法,因为方法也是数据。在这种情况下,我们说这个属性是一个方法。

var dog = {
  name: 'Benji', 
  talk: function(){
    alert('Woof, woof!');
  }
};

javascript 中,也可以在数组元素上定义方法并且可以执行,但是这种方式很少使用。

var a = [];
a[0] = function(what){
    alert(what);
};
a[0]('Boo!');

访问对象的属性

有两种方法可以访问一个对象的属性:

  • 用方括号[],比如hero['occupation']
  • 用点号,比如hero.occupation

用点号可以方便我们读写,但是如果属性名是不合法的时候,用点号就不行。
我们继续看上面的hero对象:

var hero = {
  breed: 'Turtle',
  occupation: 'Ninja'
};
?
// 用点号访问属性
hero.breed;  // "Turtle"
// 用方括号访问属性
hero['occupation']; // "Ninja"
// 访问不存在的属性,将会返回undefined
'Hair color is ' + hero.hair_color;  // "Hair color is undefined"
?

对象可以包含任何数据,包括对象。

var book = {
  name: 'Catch-22',
  published: 1961,
  author: {
    firstname: 'Joseph',
    lastname: 'Heller'
  }
};

要获得 author 中的 firstname 属性的值,可以这样访问:

book.author.firstname;  // "Joseph"

或者用方括号

book['author']['lastname'];  // "Heller"

也可以混合使用

book.author['lastname'];  // "Heller"
book['author'].lastname;  // "Heller"

有时候我们要访问的属性名是未知的。那么在运行时,可以把属性名动态的存在一个变量上。然后用方括号的方式访问。这种情况下,用点号是不行的。

?

var key = 'firstname';
book.author[key];  // "Joseph"

调用对象的方法

可以说,方法只不过是特殊的属性,所以,你可以像访问属性一样访问方法。

var hero = {
  breed: 'Turtle',
  occupation: 'Ninja',
  say: function() {
    return 'I am ' + hero.occupation;
  }
}
hero.say();  // "I am Ninja"
hero['say']();  // "I am Ninja"

修改属性和方法

由于javascript是一种动态语言,它允许使用者在任何地方修改对象的属性和方法。包括添加,删除属性等。

我们可以先传进一个空的对象来试试:

var hero = {};

?

然后访问一个不存在的属性:

typeof hero.breed;  // "undefined"

添加一些属性和方法在对象中:

hero.breed = 'turtle';
hero.name = 'Leonardo';
hero.sayName = function() {
    return hero.name;
};

?

试一下调用对象的方法:

hero.sayName();  // "Leonardo"

删除属性:

delete hero.name;  // true

然后再次调用刚才的方法:

hero.sayName();  // reference to undefined property hero.n