JavaScript类构造函数参数访问指南：避免‘undefined’错误

class Product {
    constructor(data) {
        // 错误之处：试图通过 this.data 访问属性，而 this.data 尚未定义
        this.image = this.data.image; 
        this.volume = this.data.volume;
        this.name = this.data.name;
        this.url = this.data.url;
        this.price = this.data.price;
        this.uom = this.data.uom;
    }
}

// 实例化 Product 类
// 假设 productData 包含了所有必要的属性
let productData = {
    image: "path/to/image.jpg",
    volume: "100ml",
    name: "Sample Product",
    url: "product.com/sample",
    price: "9.99",
    uom: "each"
};

// 当执行这行代码时，会抛出 TypeError
let product = new Product(productData); 

class Product {
    constructor(data) {
        // 正确做法：直接从构造函数参数 data 中读取属性
        this.image = data.image; 
        this.volume = data.volume;
        this.name = data.name;
        this.url = data.url;
        this.price = data.price;
        this.uom = data.uom;
    }
}

// 定义 Product 类
class Product {
  constructor(data) {
    this.image = data.image;
    this.volume = data.volume;
    this.name = data.name;
    this.url = data.url;
    this.price = data.price;
    this.uom = data.uom;
  }
}

// 假设从 DOM 或其他数据源获取到数据
// 这里我们模拟一个数据对象
let productData = {
  image: "https://example.com/images/product1.jpg",
  volume: "500ml",
  name: "Premium Coffee Beans",
  url: "https://example.com/product/coffee",
  price: "12.99",
  uom: "bag",
};

// 创建 Product 实例
let myProduct = new Product(productData);

// 验证实例属性是否正确初始化
console.log("创建的产品实例：", myProduct);
console.log("产品名称：", myProduct.name); 
console.log("产品图片URL：", myProduct.image); 

/*
输出结果：
创建的产品实例： Product {
  image: 'https://example.com/images/product1.jpg',
  volume: '500ml',
  name: 'Premium Coffee Beans',
  url: 'https://example.com/product/coffee',
  price: '12.99',
  uom: 'bag'
}
产品名称： Premium Coffee Beans
产品图片URL： https://example.com/images/product1.jpg
*/

class Product {
  // 使用解构赋值直接从传入的 data 对象中提取所需属性
  constructor({ image, volume, name, url, price, uom }) { 
    this.image = image;
    this.volume = volume;
    this.name = name;
    this.url = url;
    this.price = price;
    this.uom = uom;
  }
}

// 实例化方式保持不变
let productDataOptimized = { /* ... 同上 ... */ };
let myProductOptimized = new Product(productDataOptimized);
console.log("使用解构创建的产品实例：", myProductOptimized);