JavaScript 中对象是如何创建与继承的,说实话,这是一个老生常谈的问题了,哈哈,但咱就是说,还是有必要好好梳理一下的。

从理解对象谈起,说明了对象中的两个关键点key和prototype,然后介绍了对创建对象的三种方式,包括字面量、构造函数、Object.create和class person,Zui后对JavaScript的继承进行了详细解析。

日常开发中，我们需要创建各种各样的对象,比如用户对象、商品对象等,那么,如何创建对象呢?

Zui直观、Zui简洁的创建方式,直接用 {} 包裹键值对,相当于“随手创建一个独立对象”，不用额外定义模板,适合快速创建单个对象。

// 基础写法 const person = { name: "张三", age: 20, // 方法简写 sayHello { console.log; } }; // 特殊场景写法 const user = { "user-name": "lisi", "age+": 21, { // 计算属性名 console.log; } }; // 使用方式 person.sayHello; // 输出：你好，我是张三 user; // 输出：lisi user.sayHi; // 输出：Hi~ 核心特点

✅ Zui简单、代码量Zui少，上手无门槛，日常开发高频使用

✅ 适合创建「单个独立对象」

❌ 不适合批量创建多个相似对象

Ru果需要创建多个结构相似的对象，就需要一个“模板”——构造函数。

构造函数本质是一个普通函数，通过 this 绑定属性和方法，配合 new 关键字生成实例，实现批量创建。

// 定义构造函数 function Person { // this 指向当前创建的实例 this.name = name; // 实例属性 this.age = age; } // 公共方法挂载到原型上 Person.prototype.sayHello = function { console.log; }; // 创建实例 const p1 = new Person; const p2 = new Person; // 使用实例 p1.sayHello; // 输出：我是张三，今年20岁 p2.sayHello; // 输出：我是李四，今年21岁 // 验证：两个实例的方法是同一个 console.log; // 输出：true 核心特点

✅ 公共方法「共享」，只创建一次大幅节省内存，性NengZui优

✅ 可通过 instanceof 判断实例类型，便于类型校验

Object.create 是 ES5 引入的方法，核心功Neng是「基于一个现有对象作为原型，创建一个新对象」。它跳过了构造函数，直接通过原型对象生成新实例，适合灵活实现原型继承，或创建无原型的空对象。

// . 定义原型对象 const personProto = { name : "默认名字" , // 原型属性 sayHello { console . log ; } , // 原型上的方法也Ke以访问原型上的其他属性 showDefaultName { console . log ; } } ; // . 创建新对象 const p1 = Object . create ; p1 . name = "张三" ; // 覆盖原型上的 name 属性 // . 使用新对象 p1 . sayHello ; // 输出：我是张三 p1 . showDefaultName ; // 输出：默认名字：张三 // 特殊场景：创建空原型对象 const emptyObj = Object . create ; console . log ; // 输出：undefined 核心特点

✅ 灵活实现「原型继承」，无需定义构造函数，直接复用现有对象的原型

支持原型链查找，可灵活 公共方法 / 属性。

✅ 可创建「空原型对象」，避免继承 Object 的原型方法，适合Zuo纯净的数据容器

❌ 缺点1：引用类型属性依然被所有实例共享

❌ 缺点2：无法向父原型对象传递参数

class 是 ES6 引入的语法糖，本质还是「构造函数 + 原型」，只是写法geng简洁、语义化geng强，解决了原生构造函数+原型写法繁琐、可读性差的问题，是现代 JS 开发的首选方案。

class Person { constructor { this . name = name ; this . age = age ; } sayHello { console . log ; } static showClassName { console . log ; } get fullInfo { return ${ this . name } - ${ this . age } 岁 ; } set fullInfo { const = info . split ; this . name = name ; this . age = Number ; } }