导读:本期聚焦于台湾程序员创作的《JavaScript创建对象用对象字面量还是new Object()?两者有什么区别?》,敬请观看详情。在JavaScript里创建对象有两种常见写法,一种是大括号的对象字面量,另一种是new Object()构造函数调用。这两种方式看起来效果差不多,但底层机制、执行效率和适用场景都有差别。本文从语法形式、原型指向、作用域解析、性能开销和代码可读性几个角度做对比分析,解释为什么实际开发中推荐优先使用对象字面量,以及在什么情况下new Object()会带来意想不到的坑,比如Object作为普通函数调用时的自动转换行为,帮助读者彻底搞清楚这两种对象创建方式的本质差异。

写JavaScript的时候,创建对象几乎是每天都在做的事。最常见的两种写法一种是var obj = {},另一种是var obj = new Object()。两者产出的对象看起来一模一样,都能挂属性、都能遍历,于是不少人会觉得这只是风格差异,用哪个都行。但深入到语言规范层面,这两种写法其实有不少值得推敲的差别,包括语法解析机制、作用域安全问题以及潜在的隐式转换坑。

JavaScript创建对象用对象字面量还是new Object()?两者有什么区别?

语法层面:字面量是声明式,构造函数是函数调用

对象字面量{}是JavaScript语言内置的声明式语法,解析器在语法分析阶段就知道这里要创建一个对象,直接生成创建对象的指令。而new Object()本质上是一次函数调用加上new运算符的组合,涉及查找Object这个标识符、以构造函数形式执行等一系列运行时步骤。

这种差别最直接的体现是初始化属性的方式。字面量允许在创建的同时就把属性写好,代码紧凑且意图清晰:

var user = {
  name: '张三',
  age: 25,
  sayHi: function () {
    console.log('你好,我是' + this.name);
  }
};

如果换成new Object(),则需要先创建空对象再逐个赋值:

var user = new Object();
user.name = '张三';
user.age = 25;
user.sayHi = function () {
  console.log('你好,我是' + this.name);
};

后者不仅代码更长,而且属性添加分散在多条语句中,可读性明显下降。当代码需要review或者排查问题时,一段集中的对象定义显然比散落各处的赋值语句更容易把握全貌。这也是主流代码规范如Airbnb风格指南明确要求只使用字面量创建对象的重要原因。

作用域隐患:Object标识符可能被覆盖

new Object()的另一个问题是它依赖全局作用域里的Object标识符。JavaScript允许在局部作用域重新声明同名变量,一旦发生遮蔽,行为就可能出乎意料:

function demo() {
  var Object = function () {
    this.name = '被覆盖了';
  };
  var obj = new Object(); // 实际调用的是局部构造函数
  console.log(obj.name);  // 输出:被覆盖了
}

虽然很少有人会故意这么写,但在维护老旧代码或引入第三方脚本时,这类标识符冲突并非天方夜谭。而对象字面量{}是纯语法结构,不经过任何标识符查找,天然免疫这种作用域遮蔽问题。

类似的隐患还出现在其他内置构造函数上,比如String、Number、Boolean被局部覆盖后,对应的字面量写法依然稳定可靠。这也是为什么有经验的开发者普遍遵循一条原则:能用字面量就不要碰构造函数。

隐式转换的坑:Object作为普通函数调用

还有一个容易被忽视的细节:Object不加new直接调用时是一个类型转换函数,它会根据传入参数返回不同类型的值,而不是总返回对象:

console.log(Object('hello'));        // 返回String包装对象
console.log(Object(42));             // 返回Number包装对象
console.log(Object(true));           // 返回Boolean包装对象
console.log(Object(null));           // 返回普通空对象
console.log(new Object('hello'));    // 同样返回String包装对象

var a = new Object('hello');
console.log(a instanceof String);    // true,不是预期的普通对象

可以看到,如果向new Object()传入一个原始值,得到的是对应的包装对象而非普通对象。包装对象在松散相等比较时表现诡异,new Object(false) == false结果是true,但在严格相等下又是false,调试起来非常折磨人。对象字面量则始终创建一个干净的、原型指向Object.prototype的普通对象,行为完全可预期。

更危险的是Object()在不带new的情况下,如果传入的是某个对象就直接原样返回。这意味着某些依赖类型判断的逻辑可能被一个意外的构造函数调用破坏掉,而这类bug往往只在特定输入下才触发,定位成本很高。

性能与规范建议

从执行性能角度看,现代JavaScript引擎对字面量的优化程度远高于构造函数调用。以V8为例,字面量会在解析阶段被识别并生成固定的初始化模板,配合隐藏类机制,属性布局可以被引擎精确预测;而new Object()走的是通用的构造调用路径,后续逐条赋值语句会让隐藏类多次迁移,增加了优化难度。虽然单次差异在毫秒以下,但在高频创建对象的热点代码里,累积差距不容忽视。

综合来看,两者的选择其实没有太多悬念。日常开发中优先使用对象字面量,它语法简洁、结构集中、不依赖全局标识符、行为可预期,并且对引擎优化更友好。new Object()几乎没有任何字面量做不到的独门能力,保留它主要是历史兼容和语言完整性的需要。类似的结论也适用于数组:[]优于new Array(),字符串、数字、布尔值同理。理解这背后的原理,不只是记住一条编码规范,而是真正明白声明式语法与运行时函数调用在语言设计上的本质区别,这种思维方式迁移到其他语言特性上同样有价值。

对象字面量JavaScript对象new Object修改时间:2026-09-16 11:18:30

免责声明:已尽一切努力确保本网站所含信息的准确性。网站作品多为原创整理与精心创作,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们进行处理Email:chomcom@qq.com。
引用或转载本作品时,请注明当前出处:https://www.ipipp.com/html/0916/57907.html,基于非商业用途的前提下,欢迎转载或二创本作品。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。