登录
首页 >  文章 >  前端

JavaScript对象创建方法全解析

时间:2026-02-08 22:54:47 479浏览 收藏

“纵有疾风来,人生不言弃”,这句话送给正在学习文章的朋友们,也希望在阅读本文《JavaScript对象创建与使用详解》后,能够真的帮助到大家。我也会在后续的文章中,陆续更新文章相关的技术文章,有好的建议欢迎大家在评论留言,非常感谢!

JavaScript对象本质是键值对集合,继承自Object.prototype;字面量创建简洁但存在引用陷阱和this绑定时机问题;构造函数需用new避免全局污染;Object.create()可显式控制原型链;ES6 class仅为语法糖。

javascript中的对象是如何创建和使用的?【教程】

JavaScript 中的对象不是靠“定义类”再实例化出来的,而是直接通过字面量、构造函数或 Object.create() 等方式生成——本质是键值对的集合,且所有对象都继承自 Object.prototype

用字面量创建对象最常用,但要注意引用陷阱

字面量写法简洁:{ name: "Alice", age: 30 }。它适合一次性配置、参数传递、返回简单结构数据。

  • 多个变量引用同一字面量对象时,修改一个会影响所有——因为它们指向内存中同一个地址
  • 对象字面量中的方法不能访问“尚未声明”的同级属性(this 在运行时才绑定,不是声明时)
  • 如果属性名含空格或特殊字符,必须用引号包裹:{"full name": "Bob"},取值只能用方括号:obj["full name"]

new Object() 和构造函数的区别不只是写法问题

new Object() 几乎等价于字面量,但更冗长;真正关键的是自定义构造函数,比如:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.say = function() { return `I'm ${this.name}`; };
}

new Person("Tom", 25) 创建实例后:

  • 每个实例都会重复创建 say 函数,浪费内存——应把方法挂到 Person.prototype
  • 忘记写 new 会导致 this 指向全局(非严格模式下),污染全局作用域
  • ES6 的 class 只是语法糖,底层仍基于原型链,不改变对象创建的本质逻辑

Object.create() 显式控制原型链

当你需要精确指定新对象的原型(而不是默认 Object.prototype),就该用 Object.create()

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.jumps = true;

这时 rabbit 的原型是 animalrabbit.eats 能读取成功,但 rabbit.constructor 会指向 Object,不是 animal

  • Object.create(null) 创建“无原型”对象,常用于哈希表场景,避免 hasOwnProperty 等方法被意外覆盖
  • 第二个参数可传入属性描述符对象,实现不可枚举、只读等控制,比字面量更精细
  • 不要用它替代字面量来建普通数据对象——过度设计,且可读性下降

对象的“动态性”是双刃剑:可以随时增删属性,但也意味着类型不可靠、IDE 推导弱、容易拼错键名。现代项目中,往往配合 TypeScript 或运行时校验(如 zod)来约束结构,而不是依赖纯 JS 的自由创建方式。

以上就是《JavaScript对象创建方法全解析》的详细内容,更多关于的资料请关注golang学习网公众号!

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>