[!info] related notes

• 所属 MOC: ecmascript-object-oriented, ecmascript-moc
• 并列概念: js原型和原型链
• 关系笔记: ecmascript-object-oriented, ecmascript-object总结

js对象

对象是 JavaScript 对象模型的起点：先理解对象和属性访问，后面才能理解原型、构造函数和 class。

这篇重点

• 对象本质上是一组键值对
• 属性可以用点语法或方括号语法访问
• 读属性会先看对象自身，再看原型链
• 写属性通常写回对象自身

属性访问有哪两种写法

点语法

const user = { name: 'Tom' }
console.log(user.name)

适合属性名是合法标识符，并且你在代码里已经写死这个字段名的场景。

方括号语法

const user = { name: 'Tom' }
console.log(user['name'])

适合：

• 属性名是动态的
• 属性名里有空格、连字符等
• 需要计算属性名

计算属性名

const key = 'age'

const user = {
  name: 'Tom',
  [key]: 18,
}

console.log(user.age)     // 18
console.log(user[key])    // 18

这里的 [key] 不是把字符串 "key" 当字段名，而是先求 key 的值，再把结果作为属性名。

最容易出的输出题

const key = 'name'

const obj = {
  [key]: 'Alice',
  key: 'Bob',
}

console.log(obj.name)   // Alice
console.log(obj.key)    // Bob
console.log(obj[key])   // Alice

这题在考两个点：

• [key] 是计算属性名，结果是 name
• key: 'Bob' 才是字面量属性名 key

一个更容易错的点

const obj = {
  1: 'a',
}

console.log(obj[1])     // 'a'
console.log(obj['1'])   // 'a'

对象属性名最终会转成字符串，所以这里两种访问结果一样。

面试里最短答法

对象属性访问分点语法和方括号语法。点语法适合固定字段，方括号语法适合动态字段；计算属性名本质上是先算出属性名，再把这个结果作为对象键。