在 JavaScript 中，可以使用多种方式来访问和设置对象的属性, 包括点表示法和方括号表示法。

点表示法和方括号表示法

1. 点表示法：使用点号（.）来访问或设置对象的属性。
2. 方括号表示法：使用方括号（[]）来访问或设置对象的属性。

这两种方法基本上是等价的，然而在某些情况下，方括号表示法能够提供更多的灵活性，例如属性名是变量或包含特殊字符的情况。

示例代码解释

javascript">const s = {};
s['name'] = 'john';
s.name = 'bob';

这段代码执行了以下操作：

1. 创建对象

   javascript">const s = {};
   

   创建了一个新的空对象 s。

2. 方括号表示法设置属性

   javascript">s['name'] = 'john';
   

   使用方括号表示法，设置对象 s 的属性 name 为 'john'。

   此时，s 的状态为：

   javascript">{
     name: 'john'
   }
   

3. 点表示法设置属性

   javascript">s.name = 'bob';
   

   使用点表示法，设置对象 s 的属性 name 为 'bob'。

   最终，s 的状态为：

   javascript">{
     name: 'bob'
   }
   

由于最后一次设置操作赋值为 'bob'，属性名和其值之间的映射被更新，因此最终 s.name 变成了 'bob'。

点表示法 vs 方括号表示法

使用点表示法的示例：

javascript">const person = {};
person.name = 'Alice';
person.age = 25;

console.log(person.name); // 输出 'Alice'
console.log(person.age);  // 输出 25

使用方括号表示法的示例：

javascript">const person = {};
person['name'] = 'Alice';
person['age'] = 25;

console.log(person['name']); // 输出 'Alice'
console.log(person['age']);  // 输出 25

方括号表示法的特殊应用场景：

1. 使用变量作为属性名

   javascript">const person = {};
   const prop = 'name';
   person[prop] = 'Alice';
   
   console.log(person.name); // 输出 'Alice'
   

2. 处理包含特殊字符的属性名

   javascript">const person = {};
   person['first-name'] = 'Alice';
   
   console.log(person['first-name']); // 输出 'Alice'
   

3. 动态属性名

   javascript">const person = {};
   let key = 'age';
   
   person[key] = 30;
   
   console.log(person.age); // 输出 30
   

总结

• 点表示法 (.)：更简洁，用于常规属性名（遵循变量命名规则）。
• 方括号表示法 ([])：更灵活，可用于属性名是变量、含有特殊字符或者包含空格的情况。

在你的示例中，两种表示法都用于设置和获取对象属性，最后一次的赋值操作覆盖了前一个操作，因此 s.name 的最终值为 'bob'。