一. 认识 JavaScript 对象

1.1. 对象的定义方式

对象是 JavaScript 中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物：

  • 比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等等；

  • 比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run）等等；

用对象来描述事物，更有利于我们将现实的事物，抽离成代码中某个数据结构：

  • 所以有一些编程语言就是纯面向对象的编程语言，比 Java；

  • 你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象；

现实到编程的抽象

JavaScript 其实支持多种编程范式的，包括函数式编程和面向对象编程：

  • JavaScript 中的对象被设计成一组属性的无序集合，像是一个哈希表，有 key 和 value 组成；

  • key 是一个标识符，value 可以是任意类型，包括也可以是其他对象或者函数类型；

  • 如果值是一个函数，那么我们可以称之为是对象的方法；

1.2. 如何创建对象

早期使用创建对象的方式最多的是使用 Object 类，并且使用 new 关键字来创建一个对象：

  • 这是因为早期很多 JavaScript 开发者是从 Java 过来的，它们也更习惯于 Java 中通过 new 的方式创建一个对象；
1
2
3
4
5
6
7
8
// 1.创建一个空的对象
const obj1 = new Object();
obj1.name = "why";
obj1.age = 18;
obj1.height = 1.88;
obj1.eating = function () {
  console.log(this.name + "在吃东西");
};

后来很多开发者为了方便期间，都是直接通过字面量的形式来创建对象：

  • 这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来；
1
2
3
4
5
6
7
8
9
// 2.字面量的形式创建对象
const obj2 = {
  name: "kobe",
  age: 40,
  height: 1.98,
  running: function () {
    console.log(this.name + "在跑步");
  }
};

1.3. 对象的属性描述

在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的：

  • 但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否是可以通过 delete 删除的？这个属性是否在 for-in 遍历的时候被遍历出来呢？
1
const obj = { name: "why" };

如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用使用属性描述符。

  • 通过属性描述符可以精准的添加或修改对象的属性；

  • 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改；

属性描述符的类型有两种：

  • 数据属性（Data Properties）描述符（Descriptor）；

  • 存取属性（Accessor 访问器 Properties）描述符（Descriptor）；

1.3.1. 数据属性描述符

数据数据描述符有如下四个特性：

  • [[Configurable]]：表示属性是否可以通过 delete 删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为 true；

  • 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为 false；

  • [[Enumerable]]：表示属性是否可以通过 for-in 或者 Object.keys()返回该属性；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为 true；

  • 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为 false；

  • [[Writable]]：表示是否可以修改属性的值；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为 true；

  • 当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为 false；

  • [[value]]：属性的 value 值，读取属性时会返回该值，修改属性时，会对其进行修改；

  • 默认情况下这个值是 undefined；

接下来我们来测试一下默认添加的属性，上面的特性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const obj = {
  name: "why",
  age: 18,
  height: 1.88
};

// 默认是可以配置
// delete obj.name
// console.log(obj)

for (const key in obj) {
  console.log(key);
}

console.log(Object.keys(obj));

obj.name = "kobe";
console.log(obj);

自己定义某一个属性，来查看它们的特性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// "use strict"
const obj = { name: "why", age: 18, height: 1.88 };
// 自己定义的属性
Object.defineProperty(obj, "address", {
  // configurable: false,
  // enumerable: false,
  // writable: false,
  value: "北京市"
});

// 1.测试enumerable为false
// 这种方式访问时看不到属性
console.log(obj);
console.log(Object.keys(obj));
for (const key in obj) {
  console.log(key);
}

// 这种方式是可以访问的
console.log("address" in obj);
console.log(obj.hasOwnProperty("address"));
console.log(obj.address);

// 2.测试writable, 修改address的值
obj.address = "广州市"; // 北京市, 并且在严格模式下会报错
console.log(obj.address);

// 3.测试configurable
// 不可以删除
delete obj.address;
// 不可以重新修改
Object.defineProperty(obj, "address", {
  configurable: true
});

console.log(obj.address);

1.3.2. 存取属性描述符

数据数据描述符有如下四个特性：

  • [[Configurable]]：表示属性是否可以通过 delete 删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

  • 和数据属性描述符是一致的；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为 true；

  • 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为 false；

  • [[Enumerable]]：表示属性是否可以通过 for-in 或者 Object.keys()返回该属性；

  • 和数据属性描述符是一致的；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为 true；

  • 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为 false；

  • [[get]]：获取属性时会执行的函数。默认为 undefined

  • [[set]]：设置属性时会执行的函数。默认为 undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"use strict";

const obj = {
  name: "why",
  age: 18
};

const address = "北京市";
Object.defineProperty(obj, "address", {
  configurable: true,
  enumerable: true,
  get: function () {
    return address;
  },
  set: function (value) {
    address = value;
  }
});

console.log(obj.address);

obj.address = "广州市";
console.log(obj.address);

1.3.3. 同时定义多个属性

如果我们希望给对象同时定义多个属性的属性描述符，可以使用 Object.defineProperties()

  • Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const obj = {
  _age: 18
};

Object.defineProperties(obj, {
  name: {
    writable: true,
    value: "why"
  },
  age: {
    get: function () {
      return this._age;
    }
  }
});

console.log(obj.name);

obj.name = "kobe";
console.log(obj.name);

1.3.4. 对象方法的补充

获取对象的属性描述符：

  • getOwnPropertyDescriptor

  • getOwnPropertyDescriptors

禁止对象扩展新属性：preventExtensions

  • 给一个对象添加新的属性会失败（在严格模式下会报错）；

密封对象，不允许配置和删除属性：seal

  • 实际是调用preventExtensions

  • 并且将现有属性的configurable:false

冻结对象，不允许修改现有属性： freeze

  • 实际上是调用seal

  • 并且将现有属性的writable: false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const obj = {};

// 1.getOwnPropertyDescriptor
// { value: 'why', writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
console.log(Object.getOwnPropertyDescriptors(obj));

// 2.禁止对象扩展
Object.preventExtensions(obj);
obj.height = 1.88;
console.log(obj.height);

// 3.密封对象(不能删除和配置属性)
Object.seal(obj);
delete obj.name;
console.log(obj);

// 4.冻结对象(不能修改属性)
Object.freeze(obj);

// 现有属性也不能修改
obj.name = "kobe";
console.log(obj);

二. 创建对象

2.1. 如何创建多个对象

如果我们现在希望创建一系列的对象：比如 Person 对象

  • 包括张三、李四、王五、李雷等等，他们的信息各不相同；

那么采用什么方式来创建比较好呢？

目前我们已经学习了两种方式：

  • new Object 方式；

  • 字面量创建的方式；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const p1 = {
  name: "张三",
  age: 18,
  height: 1.77,
  address: "北京市"
};
const p2 = {
  name: "李四",
  age: 20,
  height: 1.87,
  address: "上海市"
};
const p3 = {
  name: "王五",
  age: 19,
  height: 1.88,
  address: "杭州市"
};

这种方式有一个很大的弊端：创建同样的对象时，需要编写重复的代码；

2.2. 工厂模式创建对象

我们可以想到的一种创建对象的方式：工厂模式

工厂模式其实是一种常见的设计模式；

  • 通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function createPerson(name, age, height, address) {
  const p = new Object();
  p.name = name;
  p.age = age;
  p.height = height;
  p.address = address;
  p.eating = function () {
    console.log(this.name + "在吃东西~");
  };
  p.running = function () {
    console.log(this.name + "在跑步~");
  };
  return p;
}

const p1 = createPerson("张三", 18, 1.88, "北京市");
const p2 = createPerson("李四", 20, 1.68, "上海市");
const p3 = createPerson("王五", 25, 1.78, "南京市");
const p4 = createPerson("李雷", 19, 1.78, "广州市");

console.log(p1);
console.log(p2);

代码解析:

  • 函数 createPerson()能够根据接受的参数来构建一个包含所有必要信息的 Person 对象；

  • 可以无数次地调用这个函数，而每次它都会返回一个包含三个属性一个方法的对象；

  • 工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）；

  • 随着 JavaScript 的发展，又一个新模式出现了；

2.3. 构造函数创建对象

2.3.1. 认识构造函数

工厂方法创建对象有一个比较大的问题：我们在打印对象时，对象的类型都是 Object 类型

  • 但是从某些角度来说，这些对象应该有一个他们共同的类型；

  • 下面我们来看一下另外一种模式：构造函数的方式；

我们先理解什么是构造函数？

  • 构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数；

  • 在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法；

  • 但是 JavaScript 中的构造函数有点不太一样；

JavaScript 中的构造函数是怎么样的？

  • 构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；

  • 那么如果这么一个普通的函数被使用 new 操作符来调用了，那么这个函数就称之为是一个构造函数；

那么被 new 调用有什么特殊的呢？

2.3.2. new 操作符

如果一个函数被使用 new 操作符调用了，那么它会执行如下操作：

  • 1.在内存中创建一个新的对象（空对象）；

  • 2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的 prototype 属性；（后面详细讲）；

  • 3.构造函数内部的 this，会指向创建出来的新对象；

  • 4.执行函数的内部代码（函数体代码）；

  • 5.如果构造函数没有返回非空对象，则返回创建出来的新对象；

1
2
3
function Person() {}
const p1 = new Person();
const p2 = new Person();

2.3.4. 构造函数方式

我们来通过构造函数实现一下：

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age, height, address) {
  this.name = name;
  this.age = age;
  this.height = height;
  this.address = address;
  this.eating = function () {
    console.log(this.name + "在吃东西~");
  };
  this.running = function () {
    console.log(this.name + "在跑步~");
  };
}

这个构造函数可以确保我们的对象是有 Person 的类型的（实际是 constructor 的属性，这个我们后续再探讨）；

但是构造函数就没有缺点了吗？

  • 构造函数也是有缺点的，它在于我们需要为每个对象的函数去创建一个函数对象实例；

文章转载于coderwhy | JavaScript 高级系列（九） - 理解对象和创建对象