如何通过JavaScript函数创建对象？两种写法的差异探究

兄弟，我太懂这种搜半天找不到精准答案的憋屈了！你说的这两种JS对象写法，我当初学的时候也懵过——看起来功能一模一样，但其实不少场景下藏着细微差别，我结合最常见的几种易混淆写法给你唠唠：

情况1：方法定义的两种写法 #

这应该是最容易搞混的场景，比如：

写法1：传统函数属性写法 #

const myObj = {
  greet: function() {
    console.log('Hello!');
    console.log(this); // 指向调用该方法的对象
  }
};

写法2：ES6简洁方法写法 #

const myObj = {
  greet() {
    console.log('Hello!');
    console.log(this); // 同样指向调用该方法的对象
  }
};

核心差异：

• 能不能当构造函数用：简洁写法的greet()不能用new调用（比如new myObj.greet()会直接报错）；但传统的function()写法可以作为构造函数，能创建新的实例对象。
• 有没有原型：简洁方法没有自己的prototype属性，而传统函数写法有——不过日常开发里这个差异很少用到，除非你要手动搞原型链。
• 其他场景几乎无差：两种写法的this指向、枚举性（能不能被Object.keys()遍历到）完全一致。

情况2：属性名的两种写法 #

如果你的代码是属性名的不同写法，比如：

写法A：固定字面量属性名 #

const username = 'Alice';
const user = {
  username: username // ES6里还能简写为`username`
};
// 最终user是 { username: 'Alice' }

写法B：计算属性名 #

const username = 'Alice';
const key = 'name';
const user = {
  [key]: username
};
// 最终user是 { name: 'Alice' }

核心差异：

• 固定字面量的属性名是写死的字符串，不管变量username是什么，属性名永远是"username"；
• 计算属性名会把方括号里的表达式结果作为属性名——比如上面的[key]会把变量key的值"name"当成属性名，灵活性更高，适合动态生成属性名的场景。

情况3：对象属性的简写vs完整写法 #

如果是这种写法：

// 完整写法
const age = 25;
const person = { age: age };
// 简写写法
const person = { age };

那这俩是完全等价的，就是ES6给的语法糖，纯粹是让代码更简洁，没有任何功能差异。

要是你的代码是其他组合（比如箭头函数作为对象属性和普通函数的差异），可以补充细节，我再给你拆解~

内容的提问来源于stack exchange，提问作者MyDaftQuestions