对象基础

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）。

在 javascript 中，一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象(物体)，拥有属性。杯子有颜色，图案，重量，由什么材质构成等等。同样， javascript 对象也有属性来定义它的特征。

对象的分类

1. 内建对象

  • 由ES标准中定义的对象，在任何的ES的实现中都可以使用
  • 比如：Math String Number Function Object…

2. 宿主对象

  • 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
  • 比如 BOM DOM

3. 自定义对象

  • 由开发人员自己创建的对象

对象和属性

一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。属性定义了对象的特征。

点表示法

可以用点表示法来访问对象的属性和方法。比如：

1
2
person.age
person.name.first

括号表示法

另外一种访问属性的方式是使用括号表示法。比如：

1
2
person['age']
person['name']['first']

创建新对象

可以通过对象初始化器创建对象。或者可以创建一个构造函数并使用该函数和 new 操作符初始化对象。

使用对象初始化器

通过对象初始化器创建对象的语法如下：

1
2
3
4
5
var obj = { property_1:   value_1,   // property_# 可以是一个标识符...
            2:            value_2,   // 或一个数字...
           ["property" +3]: value_3,  //  或一个可计算的key名...
            // ...,
            "property n": value_n }; // 或一个字符串

使用构造函数

作为另一种方式，你可以通过两步来创建对象：

  1. 通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。
  2. 通过 new 创建对象实例。

为了定义对象类型，为对象类型创建一个函数以声明类型的名称、属性和方法。例如：

1
2
3
4
5
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

这里是通过使用 this 将传入函数的值赋给对象的属性。（ this 在后面会讲到）

现在可以像这样创建一个 mycar 对象：

1
var mycar = new Car("Eagle", "Talon TSi", 1993);

可以通过调用 new 创建任意数量的 car 对象。

使用 Object.create 方法

对象也可以用 Object.create() 方法创建。该方法非常有用，因为它允许你为创建的对象选择一个原型对象，而不用定义构造函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Car = {
  type: "Sedan", // 属性默认值
  displayType : function() {  // 用于显示type属性的方法
    console.log(this.type);
  }
}

// 创建一辆新的车——car1
var car1 = Object.create(Car);
car1.displayType(); // Output:Sedan

// 创建一种新的动物——Fishes
var car2 = Object.create(Car);
car2.type = "Coupe";
car2.displayType(); // Output:Coupe

继承

所有的 JavaScript 对象至少继承于一个对象。被继承的对象被称作原型，并且继承的属性可通过构造函数的 prototype 对象找到。

定义方法

一个方法 是关联到某个对象的函数，或者说，一个方法是一个值为某个函数的对象属性。定义方法就像定义普通的函数，除了它们必须被赋给对象的某个属性。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
// objectName.methodname = function_name;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }

// 或者这样写

  myOtherMethod(params) {
    // ...do something else
  }
};

通过 this 引用对象

JavaScript 有一个特殊的关键字 this，它可以在方法中使用以指代当前对象。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
var person1 = {
  name : 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name : 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

在这里，person1.greeting() 会输出：”Hi! I’m Chris.”；person2.greeting() 会输出：”Hi! I’m Brain.”

定义 getters 与 setters

一个 getter 是一个获取某个特定属性的值的方法。一个 setter 是一个设定某个属性的值的方法。你可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。定义 getter 和 setter 的语法采用对象字面量语法。

下面例子描述了getters 和 setters 是如何为用户定义的对象 o 工作的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var o = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2
  }
};

console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25
  • 对象的属性如下：
    • o.a — 数字
    • o.b — 返回 o.a + 1 的 getter
    • o.c — 由 o.c 的值所设置 o.a 值的 setter

删除对象的属性

你可以用 delete 操作符删除一个不是继承而来的属性。下面的例子说明如何删除一个属性：

1
2
3
4
5
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

delete myobj.a;

对象的比较

在 JavaScript 中 objects 是一种引用类型。两个独立声明的对象永远也不会相等，即使他们有相同的属性，只有在比较一个对象和这个对象的引用时，才会返回true.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 两个变量, 两个具有同样的属性、但不相同的对象
var fruit = {name: "apple"};
var fruitbear = {name: "apple"};

fruit == fruitbear // return false
fruit === fruitbear // return false

// 两个变量，同一个对象
var fruit = {name: "apple"};
var fruitbear = fruit;  

// fruit与fruitbear都指向同样的对象
fruit == fruitbear // return true
fruit === fruitbear // return true