我们日常生活中几乎每天和各种对象打交道。隔壁桌的秃顶老哥，对面花枝招展的小姐姐，还有脾气暴躁的老板...额，不说了，似乎有点跑题。其实他们都是对象，但今天要讨论的并不是他们，而是 Javascript 中的对象。废话不多说，直奔主题 ~

对象的两种定义形式

• 声明形式

let obj = {
 name: 'Darkside'
}

• 构造形式

let obj = new Object()
obj.name = 'Darkside'

上面两种形式生成的对象是一样的。唯一的区别是：在文字声明中你可以添加多个键 / 值对，但是在构造形式中你必须逐个添加属性。日常开发中基本都会用第一种声明方式。

类型

> 我们都知道 `JavaScript ` 中有那么几种类型：

- `string`

- `number`

- `boolean`

- `undefined`

- `null`

- `symbol`

- `object`

前面的都是基本类型，object是引用类型。注意：基本类型本身并不是对象 ，`null `有时候会被认做为对象，其实这也是 js 本身的一个 bug。

typeof null // "object"

实际上 `null` 是个基本类型。可以这么理解，不同对象在底层都是用二进制表示的，在` JavaScript ` 中二进制的前三位都是0的话会被判断为` object` 类型， null 的二进制表示全是0，那当然前三位也是0了。所以执行 `typeof` 的时候会返回 `object`。（当面试官问你 null 到底是什么类型的时候，就这么回答他）

内置对象

JavaScript 中还有一些对象子类型，通常被称为内置对象。有些内置对象的名字看起来和简单基础类型一样:

- `String`

- `Number`

- `Boolean`

- `Object`

- `Function`

- `Array`

- `Date`

- `RegExp`

- `Error`

我们可以很容易的把它们理解为一个类或者构造函数，这些构造函数可以通过 `new` 来实例化，从而构造出对应子类型的新对象。比如：

// 我们平时自己定义构造函数是这样,注意：一般构造函数默认大写开头
function Music(name, singer) {
 this.name = name
 this.singer = singer
}
Music.prototype.play = function() {
 console.log('开始播放')
}
Music.prototype.stop = function() {
 console.log('停止播放')
}
// 实例化
let heavenDemon = new Music('来自天堂的魔鬼', 'G.E.M')
heavenDemon.play()
heavenDemon.stop()

类似的，拿 Array 来对比：

function Array(...args) {
 // ...
}
Array.prototype.push = function() {
 // ...
}
Music.prototype.join = function() {
 // ...
}
// 实例化
let arr = new Array(0, 1, 2)
arr.push(3)
arr.join('-')

根本就是一毛一样好嘛... ok，那肯定有人会想，上面不是提到过基本类型本身并不是对象吗，那为什么我声明一个字符串可以访问它的长度 length ？你又没有 new， 没有实例化，到底咋回事。

let str = 'listen to music'
str.length // 15

其实是这样，举个栗子：

let str = 'listen to music'
typeof str // 'string'
str instanceof String // false
let strObj = new String('listen to music')
typeof strObj // ‘object’
strObj instanceof String // true

原始值 listen to music 并不是一个对象，它只是一个字面量，并且是个不可变的值。如果要在这个字面量上执行一些操作，比如获取长度、访问其中某个字符等，那需要将其转换为 `String` 对象。不过，在我们执`xxx.length` 的时候，`js` 帮我们自动把它转为 `String` 对象了， 这是我们看不到的，但它默默执行了，只是我们一般不会用构造的形式去创建一个字符串，这也太不友好了。

相同的，如果执行下面这段代码

// 引擎会把 num 转为 new Nember(30.345)
let num = 30.345
num.tofixed(2)

对于布尔字面量也是如此。

`null` 和 `undefined` 没有对应的构造形式，它们只有文字形式。相反， `Date` 只有构造，没有文字形式。

对于 `Object `、 `Array` 、 `Function` 和 `RegExp` 来说，无论使用文字形式还是构造形式，它们都是对象，不是字面量。在某些情况下，相比用文字形式创建对象，构造形式可以提供一些额外选项。由于这两种形式都可以创建对象，所以我们首选更简单的文字形式。

`Error` 对象很少在代码中显式创建，一般是在抛出异常时被自动创建。也可以使用 `new Error(..)` 这种构造形式来创建。

对象属性

属性访问

上代码

let obj = {
 name: 'Darkside'
}
obj.name // ‘Darkside’
obj['name'] // 'Darkside'

我们访问对象属性的时候一般就是这两种方式，用 `.` 访问通常被称为**属性访问**， 用 `[]` 访问被称为 **键访问** 。这两种访问方式的区别方式在于：

- 属性访问：要求属性名符合标识符的命名规范，一般是个 普通string

- 键访问： 可以接受任意 UTF-8/Unicode 字符串作为属性名

栗子：

// 属性访问
obj.name // name只能是一个普通字符串
// 键访问
// 可以用一个变量来代替对象的key
let myKey = 'age'
obj[myKey]
// 还可以写一个特殊字符的字符串，但是属性访问这样做就不行
obj['la-la!'] 
// 甚至可以计算属性名，类似symbol
let prefix = 'Mr.'
let obj = {
 [prefix + 'Right']: 'Hi~'
 [prefix + 'White']: 'Darling'
}
obj['Mr.Right'] // 'Hi~'
obj['Mr.White'] // 'Darling'

属性描述符

> 在操作对象属性的过程中，其实不只有取值和赋值的操作，对象属性中还有一些可以描述自己的属性，那就是属性描述符。

看下面代码：

let myObj = {
	name: 'GEM'
}
/**
 * @desc 返回指定对象上一个自有属性对应的属性描述符
 * @param {Object} obj 需要查找的目标对象
 * @param {String} prop 目标对象内属性名称
 * @returns {Object} property descriptor 属性描述符对象
 */
Object.getOwnPropertyDescriptor(myObj, 'name')
// {
// value: 'GEM',
// writable: true,
// 	enumerable: true,
// configurable: true
//	}

可以看到，对象中的某个属性中不仅仅只有一个 value 值，它还有另外3个特性，`writable` ，`enumerable` ，`configurable`。 这4个东西也可以称为 `数据描述符` ，归结起来就是：

- `value` ：属性值

- `writable` ：可写

- `enumerable` ：可枚举

- `configurable` ：可配置

OK，一一说明：

> `writable` 决定是否可以修改属性的值

let obj = {}
/**
 * @desc 在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象
 * @param {Object} obj 需要查找的目标对象
 * @param {String} prop 目标对象内属性名称
 * @param {Object} descriptor 将被定义或修改的属性描述符
 * @returns {Object} 被传递给函数的对象
 */
Object.defineProperty(obj, 'name', {
 value: 'GEM',
 writable: false, // 不可写！
 configurable: true,
 enumerable: true
})
obj.name = 'LaLa'
obj.name // 'GEM'

正如上面所见，修改静默失败了。如果在严格模式下，会报错 `TypeError` 。

> `enumerable` 决定这个描述符是否会出现在对象的属性枚举中

let obj = {
 age: 14
}
Object.defineProperty(obj, 'name', {
 value: 'GEM',
 enumerable: false // 不可枚举！
})
for (let key in obj) {
 console.log(key, obj[key])
}
// age 14

可以看到，定义的 name 属性并没有被枚举出来。

> `configurable` 决定这个属性是否可配置

let obj = {
 name: 'GEM'
}
Object.defineProperty(obj, 'name', {
 value: 'LaLa',
 configurable: false
})
Object.defineProperty(obj, 'name', {
 value: 'LaLa',
 configurable: true
}) // TypeError

最后一个 defineProperty(..) 会产生一个 TypeError 错误，不管是不是处于严格模式，尝试修改一个不可配置的属性描述符都会出错。注意：如你所见，把 configurable 修改成 false 是单向操作，无法撤销！

**要注意有一个小小的例外：即便属性是 configurable:false ， 我们还是可以把 writable 的状态由 true 改为 false ，但是无法由 false 改为 true 。**

除了无法修改， configurable:false 还会禁止删除这个属性。

let obj = {
 name: 'GEM'
}
Object.defineProperty(obj, 'name', {
 value: 'GEM',
 configurable: false
})
obj.name // 'GEM'
delete obj.name 
obj.name // 'GEM'

可以看到，删除失败了。

Getter和Setter（访问描述符）

首先看看对象属性默认的读写操作：

- [[Get]] 操作

其实在访问对象属性的时候，默认执行了 `[[Get]]` 操作。

let obj = {
 name: 'GEM'
}
obj.name // GEM
// 有点像是函数调用 [[Get]]()

执行取值操作的时候对象的内置 `[[Get]]` 会在对象中查找是不是有相同名称的属性，如果找到就返回，没找到就去它的原型链上去找。都没有的话就返回 undefined。

- [[Put]] 操作

既然有取值，就会有赋值，在赋值是时候默认会执行 `[[Put]]` 操作。具体不做赘述。

上面的 `Get` 和 `Put` 分别可以控制属性值的读个写，但是如果我们要自定义读写操作该怎么办呢，说白了我想覆盖默认的读写行为。这里 `getter` 和 `setter` 就派上用处了。

**getter 和 setter 都是一个隐藏函数 ，分别在获取和设置属性的时候调用。**

当我们给一个属性定义 getter 或setter的时候，这个属性会被定义为 **“访问描述符”**。跟我们上面提到的 “数据描述符”相对。对于访问描述符来说，JavaScript 会忽略它们的 value 和 writable 特性，取而代之的是关心 set 和 get （还有 configurable 和 enumerable ）特性。也就是说设置了 getter 或 setter 时，就不能设置value 和 writable 这两个数据描述符。

看下面代码：

let obj = {
 get num() {
 return 2
 }
}
Object.defineProperty(obj, 'double', {
 get: function() {
 return this.num * 2
 }
})
obj.num // 2
obj.double // 4

不管是对象文字语法中的 get a() { .. } ，还是 defineProperty(..) 中的显式定义，二者都会在对象中创建一个不包含值的属性，对于这个属性的访问会自动调用一个隐藏函数，它的返回值会被当作属性访问的返回值：

let obj = {
 get num() {
 return 2
 }
}
obj.num // 2
obj.num = 3
obj.num // 2

由于我们只定义了 num 的 getter， 所以赋值进行 set 操作的时候会忽略赋值操作，也不会跑出错误。而且即便有合法的 setter，由于我们自定义的 getter 只会返回 2，所以 set 操作是没有意义的。

**通常来说 getter 和 setter 是成对出现的**

var obj = {
 // 给 a 定义一个 getter
 get a() {
 return this._a_
 },
 // 给 a 定义一个 setter
 set a(val) {
 	this._a_ = val * 2
 }
}
obj.a = 2
obj.a // 4

## 最后

一些对象的基本知识，参考《你不知道的JavaScript》，周末了，随便看看 ~