《JavaScript语言精粹》第3章:对象——JS世界的基石

📘 《JavaScript语言精粹》第3章:对象------JS世界的基石

在JavaScript中,对象是"一等公民"。理解对象,是理解整个语言的关键。


一、对象是什么?

在JavaScript中,对象是属性的容器:

  • 每个属性都有名字 (可以是任意字符串,包括空字符串)和值 (可以是任何类型,除了undefined)
  • 对象是动态的,可以随时增删属性
  • 对象是无类别的(class-free) ,不需要类就能创建

javascript

ini 复制代码
let person = {
  name: "张三",
  age: 25
};

二、创建对象的方式

1. 对象字面量(最常用、最推荐)

javascript

csharp 复制代码
let empty = {};                     // 空对象
let point = { x: 10, y: 20 };      // 两个属性
let book = {
  title: "JavaScript精粹",
  author: "Crockford",
  "published-year": 2008            // 特殊字符需加引号
};

✅ 优点:简洁、清晰、无需new

2. 使用 Object.create

javascript

ini 复制代码
let parent = { name: "parent" };
let child = Object.create(parent);

✅ 原型继承的标准方式

3. 使用 new(不推荐)

javascript

ini 复制代码
let obj = new Object();

❌ 不推荐,容易出错且语义模糊


三、属性的操作

1. 检索属性

javascript

ini 复制代码
let flight = {
  airline: "Oceanic",
  number: 815
};

flight.airline;        // "Oceanic"
flight["number"];      // 815
flight.status;         // undefined(不存在的属性)

优先使用.表示法,更简洁

2. 更新或新增属性

javascript

ini 复制代码
flight.number = 816;          // 更新
flight.status = "overdue";    // 新增

3. 删除属性(delete)

javascript

arduino 复制代码
delete flight.status;
  • 只删除对象自身的属性
  • 不会影响原型链上的同名属性

四、引用传递

对象是引用类型,不会被隐式复制:

javascript

ini 复制代码
let a = { value: 1 };
let b = a;
b.value = 2;

console.log(a.value); // 2

赋值、传参、比较都是基于引用


五、原型链(核心重点)

1. 什么是原型?

每个对象都连接到一个原型对象,可以从中继承属性。

  • 对象字面量默认连接:Object.prototype
  • 原型链检索:如果对象没有属性,就去原型上找

javascript

ini 复制代码
let parent = { name: "parent" };
let child = Object.create(parent);

console.log(child.name); // "parent"

2. 原型链的动态性

javascript

ini 复制代码
parent.greeting = "hello";
console.log(child.greeting); // "hello"

原型链只在检索 时起作用,更新时不影响原型

3. 自定义原型方法(beget)

javascript

javascript 复制代码
if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    let F = function () {};
    F.prototype = o;
    return new F();
  };
}

六、反射与枚举

1. 检查属性是否存在

javascript

ruby 复制代码
typeof flight.number;            // "number"
flight.hasOwnProperty("number"); // true

2. 遍历属性(for...in)

javascript

erlang 复制代码
for (let prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop + ": " + obj[prop]);
  }
}

必须过滤原型链属性,推荐使用 hasOwnProperty

3. 确保顺序

javascript

ini 复制代码
let keys = ["name", "age", "city"];
for (let i = 0; i < keys.length; i++) {
  console.log(obj[keys[i]]);
}

七、减少全局污染

问题:全局变量是魔鬼

javascript

ini 复制代码
var name = "global"; // 全局污染

解决方案:唯一全局变量

javascript

ini 复制代码
let MYAPP = {};

MYAPP.person = {
  name: "张三",
  age: 25
};

MYAPP.utils = {
  log: function(msg) {
    console.log(msg);
  }
};

✅ 降低命名冲突 ✅ 提高可读性 ✅ 便于管理


八、代码示例:综合应用

javascript

ini 复制代码
// 1. 创建对象
let MYAPP = {};

MYAPP.flight = {
  airline: "Oceanic",
  number: 815,
  departure: {
    city: "Sydney",
    time: "2025-05-18 10:00"
  }
};

// 2. 原型继承
let flight2 = Object.create(MYAPP.flight);
flight2.number = 816;
flight2.arrival = { city: "LAX", time: "2025-05-18 22:00" };

// 3. 遍历属性
for (let prop in flight2) {
  if (flight2.hasOwnProperty(prop)) {
    console.log(prop + ": " + flight2[prop]);
  }
}

// 输出:
// number: 816
// arrival: [object Object]

九、本章小结

概念 说明
对象字面量 最推荐的创建方式
引用传递 对象赋值/比较基于引用
原型链 继承的核心机制
hasOwnProperty 避免原型链污染
唯一全局变量 避免污染的最佳实践
相关推荐
程序员大阳7 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
香芋芋圆12 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央14 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript
jktantan14 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
我命由我1234515 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
程序员大阳16 小时前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
paopaokaka_luck17 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩17 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper18 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js18 小时前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发