【JavaScript】day23-objects

作者:mario 发布时间: 2026-08-26 阅读量:9 评论数:0

第二十三天:对象 — 用键值对建模一台工业设备

蜗牛往上爬 · 前端工业可视化学习笔记 第 23 篇
大屏上的每台设备——名称、温度、状态、位置——用什么数据结构描述最自然?答案就是对象。今天学对象字面量、属性读写、for…in 遍历、方法中的 this,以及一个必懂的概念:引用类型。


目录


一、对象字面量

// 用对象建模一台工业设备
var device = {
  id: "CNC-001",
  name: "数控机床",
  temp: 65,
  status: "运行中",
  online: true,

  // 属性值可以是数组
  sensors: ["温度传感器", "振动传感器"],

  // 属性值可以是嵌套对象
  location: {
    workshop: "一号车间",
    row: 3,
    column: 5
  },

  // 方法:属性值是函数
  showInfo: function () {
    console.log("设备:" + this.name + ",温度:" + this.temp + "°C");
  }
};

device.showInfo();  // "设备:数控机床,温度:65°C"

二、属性的读写删

var device = { id: "CNC-001", name: "数控机床", temp: 65 };

// ===== 读 =====
console.log(device.name);      // 点语法(最常用)
console.log(device["name"]);   // 方括号

var key = "temp";
console.log(device[key]);      // 65 ⭐ key 是变量时必须用方括号

console.log(device.pressure);  // undefined(访问不存在的属性不报错)

// ===== 写 =====
device.temp = 70;          // 修改
device.pressure = 1.2;     // 添加新属性

// ===== 删 =====
delete device.pressure;

// ===== 检查属性是否存在 =====
console.log("temp" in device);  // true(推荐)

三、for…in 遍历

var device = { id: "CNC-001", name: "数控机床", temp: 65 };

for (var key in device) {
  console.log(key + ":" + device[key]);
  // ⭐ key 是变量,必须用方括号
  // ❌ device.key 错!会去找名为 "key" 的属性
}
// id:CNC-001
// name:数控机床
// temp:65

四、方法中的 this

var device = {
  name: "CNC-001",
  temp: 65,
  threshold: 80,

  isOverheat: function () {
    return this.temp > this.threshold;  // this 指向 device
  },

  report: function () {
    if (this.isOverheat()) {  // 方法内调用其他方法
      return this.name + " 温度过高:" + this.temp + "°C";
    }
    return this.name + " 正常:" + this.temp + "°C";
  }
};

console.log(device.report());  // "CNC-001 正常:65°C"
device.temp = 85;
console.log(device.report());  // "CNC-001 温度过高:85°C"

五、引用类型:对象的特殊性

这是本周最重要的概念——对象和数字、字符串的行为完全不同:

// 数字(基本类型):值拷贝
var a = 10;
var b = a;
b = 20;
console.log(a);  // 10 ✅ 不受影响

// 对象(引用类型):地址拷贝
var deviceA = { name: "CNC-001", temp: 65 };
var deviceB = deviceA;      // 指向同一个对象!
deviceB.temp = 100;
console.log(deviceA.temp);  // 100 ⚠ A 也变了

// 函数传参也是传引用
function modifyDevice(dev) {
  dev.temp = 999;
}
modifyDevice(deviceA);
console.log(deviceA.temp);  // 999 ⚠

// 比较的是地址,不是内容
console.log({ a: 1 } === { a: 1 });  // false(两个不同的对象)

六、实战:工厂函数建模设备

/**
 * 创建设备对象(工厂函数)
 * @param {string} id 设备编号
 * @param {string} name 设备名称
 * @param {number} threshold 温度阈值
 */
function createDevice(id, name, threshold) {
  return {
    id: id,
    name: name,
    threshold: threshold,
    temp: 0,
    status: "离线",

    start: function () {
      this.status = "运行中";
      this.temp = 50 + Math.floor(Math.random() * 20);
    },

    check: function () {
      if (this.status === "离线") return this.id + " 已离线";
      if (this.temp >= this.threshold) {
        return this.id + " ⚠ 温度告警:" + this.temp + "°C";
      }
      return this.id + " ✅ 正常:" + this.temp + "°C";
    }
  };
}

var cnc = createDevice("CNC-001", "数控机床", 80);
cnc.start();
console.log(cnc.check());

cnc.temp = 85;
console.log(cnc.check());  // "CNC-001 ⚠ 温度告警:85°C"

七、总结

概念

关键点

对象字面量

{ key: value },值可以是任意类型(含函数)

读写属性

点语法常用;属性名是变量时用方括号

for…in

必须用 obj[key],不能用 obj.key

this

方法中指向对象本身

引用类型

赋值传地址;=== 比地址不比内容

工厂函数

返回对象的函数,批量创建"同类"对象

🎯 对象建模了"一台设备",明天学数组——管理"一批设备"。

评论