JavaScript 对象全解：字面量、构造函数、this 指向与对象操作（入门到吃透）

一、前言在 JavaScript 中对象是核心数据结构也是面向对象编程的基础。对象本质是将变量属性和函数方法封装在一起用来描述现实世界事物比如酒店、用户、商品都可以用对象建模。 很多新手刚接触对象时分不清字面量、构造函数两种创建方式搞不懂.与[]访问语法、this关键字的指向问题本文结合酒店业务案例完整梳理 JS 对象全部核心知识点配套可运行代码适合前端初学者收藏。配套案例统一使用「酒店」实体酒店包含名称、总房间数、已预订房间数属性以及计算空闲房间的方法贴合业务更好理解。二、对象基础概念1. 属性与方法定义对象由两类成员组成属性对象内部的变量描述事物特征酒店名称、房间总数值可以是数字、字符串、数组、其他对象方法对象内部的函数描述事物行为计算剩余空房本质是值为函数的属性。示例极简酒店对象结构js运行// hotel对象5个属性 1个方法 const hotel { name: QUAY, // 字符串属性 rooms: 40, // 数字属性 booked: 25, // 数字属性 roomTypes: [twin, double, suite], // 数组属性 address: {city:上海, area:徐汇}, // 对象嵌套属性 // 方法计算空闲房间 checkAvailability: function() { // this指代当前hotel对象 return this.rooms - this.booked; } }解读name、rooms属于属性checkAvailability是方法方法内部通过this读取自身对象属性。2. 对象的优势聚合数据把同一事物的特征、行为放同一容器代码可读性高灵活拓展可动态增删属性、修改方法支持嵌套属性值可以是数组、其他对象实现复杂数据建模。三、两种创建对象核心语法3.1 字面量语法最常用单对象创建首选字面量语法用{}大括号直接声明对象适合只需要创建 1 个实例的场景开发中 90% 场景都用这种写法。语法规范键值对格式属性名: 值多组键值对用,逗号分隔方法简写属性值为函数可完整写function()ES6 支持简写方法名(){}最后一组键值对末尾可加逗号兼容低版本浏览器推荐统一添加。完整标准示例js运行// 字面量创建酒店对象 const hotel1 { name: QUAY酒店, rooms: 40, booked: 25, roomTypes: [标间, 大床, 套房], // 标准函数写法 checkAvailability: function () { return this.rooms - this.booked; }, // ES6方法简写等价上面写法 getRoomNum() { return this.rooms; } }; // 调用属性与方法 console.log(hotel1.name); // QUAY酒店 console.log(hotel1.checkAvailability()); // 15 空闲房间适用场景页面临时数据、单个实体封装、配置项接口请求配置、UI 组件配置。3.2 构造函数语法批量创建同类对象字面量只能生成单个对象如果需要批量创建多个结构相同、数据不同的对象比如多个酒店就需要构造函数。1基础构造函数new Object 空对象赋值原生内置Object构造函数先创建空对象再逐个添加属性方法代码冗余极少使用js运行// 空对象构造 const hotel new Object(); // 逐个赋值属性 hotel.name PARK酒店; hotel.rooms 100; hotel.booked 57; // 添加方法 hotel.checkAvailability function () { return this.rooms - this.booked; }; console.log(hotel.checkAvailability()); // 432自定义构造函数批量创建推荐自定义构造函数规范函数名首字母大写区分普通函数行业强制规范形参接收对象差异化数据内部用this.属性 形参绑定方法直接挂载在this上使用new 构造函数名(参数)生成实例。酒店构造函数完整示例js运行// 自定义酒店构造函数 function Hotel(name, rooms, booked) { // this指向new出来的实例对象 this.name name; this.rooms rooms; this.booked booked; // 实例方法 this.checkAvailability function () { return this.rooms - this.booked; }; } // 批量创建多个酒店实例 const hotelA new Hotel(QUAY酒店, 40, 25); const hotelB new Hotel(PARK酒店, 100, 57); // 分别调用 console.log(hotelA.name, hotelA.checkAvailability()); // QUAY酒店 15 console.log(hotelB.name, hotelB.checkAvailability()); // PARK酒店 43两种创建方式对比表格创建方式语法适用场景优缺点对象字面量{}直接大括号声明仅需 1 个对象代码简洁、性能好不适合批量生成new Object()先空对象再赋值几乎不用冗余繁琐替代方案是字面量自定义构造函数大写函数 new 调用批量创建同类实体统一模板批量生成每个实例会复制一份方法存在内存浪费可配合原型优化四、对象成员访问点语法 vs 方括号语法访问对象属性、调用方法有两种写法.点标记语法、[]方括号语法两者有明确使用边界。4.1 点语法日常优先使用语法对象.属性名/对象.方法名()限制属性名必须是合法标识符不能以数字开头、不能包含空格 / 特殊符号、不能是 JS 关键字。js运行const hotel { name:QUAY, rooms:40 }; console.log(hotel.name); // QUAY console.log(hotel.rooms); // 404.2 方括号语法动态属性、特殊属性名专用语法对象[属性名字符串]/对象[变量]优势支持特殊命名属性带空格、数字开头、特殊字符支持动态变量访问属性循环、表单渲染必备。js运行const hotel { hotel name: QUAY大酒店, // 带空格特殊属性名 123id: 1001 // 数字开头属性 }; // 特殊属性只能用[]访问 console.log(hotel[hotel name]); // QUAY大酒店 console.log(hotel[123id]); // 1001 // 动态变量取值场景 const key hotel name; console.log(hotel[key]); // QUAY大酒店4.3 两种语法使用总结固定合法属性名 → 优先用.代码简洁动态取值、属性名含空格 / 数字 / 特殊符号 → 必须用[]调用方法两种语法通用hotel.checkAvailability()/hotel[checkAvailability]()。五、对象动态操作增、改、删属性JS 对象是可变mutable无论字面量还是构造函数创建都可以随时新增、修改、删除成员。5.1 修改已有属性直接赋值覆盖即可.和[]都支持js运行const hotel { name:QUAY, rooms:40 }; // 点语法修改 hotel.name QUAY豪华酒店; // 方括号修改 hotel[rooms] 50; console.log(hotel); // {name: QUAY豪华酒店, rooms: 50}5.2 新增属性 / 方法对不存在的属性赋值自动新增到对象js运行const hotel { name:QUAY }; // 新增属性 hotel.address 上海市徐汇区; // 新增方法 hotel.getAddress function() { return this.address; } console.log(hotel.address); // 上海市徐汇区5.3 删除属性delete 关键字使用delete 对象.属性删除指定属性返回布尔值代表是否删除成功无法删除变量只能删除对象成员。js运行const hotel { name:QUAY, rooms:40 }; // 删除rooms属性 delete hotel.rooms; console.log(hotel.rooms); // undefined六、this 关键字对象方法中的核心this是 JS 高频难点在对象方法内部this固定指向调用该方法的当前实例对象。6.1 字面量对象中的 this方法内this代表当前字面量对象本身js运行const hotel { rooms:40, booked:25, fn() { console.log(this); // this hotel对象 return this.rooms - this.booked; } } hotel.fn();6.2 构造函数中的 this构造函数执行时new会自动创建空实例函数内this就指向这个新实例所有属性、方法挂载到this上最终作为实例返回js运行function Hotel(name) { this.name name; // this new出来的Hotel实例 this.logName function() { console.log(this.name); } } const h new Hotel(PARK); h.logName(); // PARK6.3 核心规则本文场景限定对象内 this对象方法直接调用obj.fn()→this等于obj构造函数搭配new调用 →this等于新建实例全局作用域直接使用 this → 指向 window浏览器环境。七、拓展数组也是特殊对象JS 中万物皆对象数组本质是内置Array构造函数生成的特殊对象数组下标本质是数字类型属性名自带内置方法push/pop/forEach挂载在数组原型上拥有length内置属性记录元素数量。示例验证js运行const arr [10,20,30]; console.log(typeof arr); // object 证明数组是对象 console.log(arr[0]); // 等价 arr[0] console.log(arr.length); // 内置属性八、完整综合实战代码整合本文全部知识点可直接复制运行js运行// 1. 字面量单对象 const quayHotel { name: QUAY精品酒店, rooms: 40, booked: 25, roomTypes: [标间, 大床], // 方法 checkEmpty() { return this.rooms - this.booked; } }; // 访问属性 console.log(quayHotel.name); console.log(quayHotel[checkEmpty]()); // 动态修改、新增、删除 quayHotel.booked 20; quayHotel.floor 12; delete quayHotel.roomTypes; // 2. 自定义构造函数批量创建 function Hotel(name, totalRoom, bookNum) { this.name name; this.rooms totalRoom; this.booked bookNum; this.getEmpty function() { return this.rooms - this.booked; } } const parkHotel new Hotel(PARK大酒店, 100, 57); console.log(parkHotel.name, 剩余房间, parkHotel.getEmpty());九、总结对象是 JS 封装数据与行为的容器由 ** 属性数据和方法函数** 组成创建对象分两大流派字面量{}适合单个对象自定义大写构造函数适合批量生成同类实例属性访问两种语法.简洁固定取值[]支持动态、特殊属性名对象可动态增删改属性delete关键字用于删除对象成员对象方法内this指向调用方法的实例是读取对象自身属性的关键