JavaScript 对象


Javascript中对象就是键值对,因此对象有时也称为关联数组。


键值对中的键只能是字符串,值可以是任何对象。

Javascript是基于对象的(object-based),通过原型(prototype)而不是类来实现继承,Javascript对象继承原型的属性和方法。在运行时也可以增加或删除对象的属性和方法。

Javascript中基本上所有东西都是对象,包括函数,函数也有属性和方法。

创建对象

Javascript中有三种方法创建对象:

  • 使用对象初始化器(Object Initializer)创建对象,例如var obj = {name: "cat", color: "white"}
  • 使用new和构造函数(constructor function)创建对象,例如var obj = new Pet("cat", "fish");
  • 使用Object.create方法和原型对象创建对象,例如var pet = {name: "cat"}; var obj=Object.create(pet);

下面是创建对象的例子:

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  var pet = {name: "dog", food: "bone"};
  document.writeln("pet.name : " + pet.name); // dog

  function Fruit(name, color) {
      this.name = name;
      this.color = color;
  }
  var banana = new Fruit("banana", "yellow");
  document.writeln("banana.color : " + banana.color); // yellow

  var fruit = {
    name: "apple",
    color: "red",
    getColor: function() {
      return this.color;
    }
  };
  var apple = Object.create(fruit);
  document.writeln("apple.getColor() : " + apple.getColor()); // red
</script>
</pre></body></html>

构造函数(constructor function)的函数名的第一个字母习惯使用大写。

属性和方法

Javascript中对象的方法是关联到对象的函数,方法和对应的函数也是一个键值对。

Javascript中有二种方法访问和给属性赋值:

  • 使用对象.属性名方式,例如obj.name="cat";var name = obj.name
  • 使用对象["属性名"]方式,例如obj["name"]="cat";var name = obj["name"]

给对象的属性赋值时如果属性或方法不存在,也就是往对象中增加属性或方法,这种方式只会往当前对象增加属性和方法。

可以通过构造函数(constructor function)的prototype属性来向构造函数中增加属性和方法,这种方式会往所有通过该构造函数创建的对象中增加属性和方法。

delete操作符可以删除一个对象的属性。

下面是属性和方法的例子:

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  var pet = {name: "dog", food: "bone"};
  pet.color = "red";
  document.writeln("pet[\"color\"] : " + pet["color"]); // red
  document.writeln("pet.name : " + pet.name); // dog

  function Fruit(name, color) {
      this.name = name;
      this.color = color;
  }
  var banana = new Fruit("banana", "yellow");
  Fruit.prototype.weight = 0.5;
  Fruit.prototype.getName = function() {
    return this.name;
  };

  document.writeln("banana.weight : " + banana.weight); // 0.5
  document.writeln("banana.getName() : " + banana.getName()); // banana
</script>
</pre></body></html>

继承和原型链

Javascript中所有对象至少继承一个对象,被继承的对象称为原型(prototype)。

每个对象都有一个私有属性Prototype(即有些浏览器中的__proto__属性,可以通过Object.getPrototypeOf方法访问),指向对象的原型对象(prototype),该原型对象也有它自己的原型对象,如此类推,直到一个对象的原型为null。null没有原型,是原型链中的最后一环。大部分对象都继承自Object对象。

当访问一个对象的属性时,会先在该对象中查找属性,如果没有找到属性,再到该对象的原型上查找,如果没有找到属性,再到对象的原型的原型上查找,如此类推,一直向原型链的上方查找,直到找到属性或到了原型链的最上方。如果属性没找到,返回undefined。

访问对象的方法同访问对象的属性一样,也是在原型链中向上查找。

下面是继承和原型链的例子:

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  function Fruit(name, color) {
      this.name = name;
      this.color = color;
  }
  Fruit.prototype.getColor = function() {
    return this.color;
  };

  var banana = new Fruit("banana", "yellow");
  document.writeln("banana.getColor() : " + banana.getColor()); // yellow

</script>
</pre></body></html>