JavaScript子类变量获取问题：多关联类点击事件场景排查

嘿，我来帮你搞定这个点击submit时获取子类变量的问题～

首先得揪出最常见的坑：事件处理函数里的上下文（this）指向不对。你在Purchase对象里给$('submit')绑定点击事件时，默认情况下事件触发时this会指向那个submit按钮DOM元素，而不是你的Purchase实例，这就导致你没法直接访问Purchase里持有的Product、Item实例。

下面给你几个针对性的解决方案，结合你的类结构来调整：

1. 给事件处理函数绑定正确的上下文 #

这是最关键的一步，有两种常用方式：

• 箭头函数：箭头函数会继承外层作用域的this，直接在绑定事件时用就行：

class Purchase {
  constructor() {
    // 绑定点击事件
    $('submit').click(() => {
      // 这里的this就是Purchase实例啦！
      console.log('当前Purchase实例:', this);
      // 现在可以正常获取子类变量了
      this.products.forEach(product => {
        console.log('Product下的Items:', product.items);
      });
    });
    this.products = []; // 存储Product实例的数组
  }
}

• bind()方法：如果事件处理逻辑比较复杂，单独写方法的话，用bind把this绑定到Purchase实例：

class Purchase {
  constructor() {
    $('submit').click(this.handleSubmit.bind(this));
    this.products = []; // 存储Product实例的数组
  }

  handleSubmit() {
    // 这里的this指向Purchase实例
    this.products.forEach(product => {
      console.log('Product的名称:', product.name);
      product.items.forEach(item => {
        console.log('Item的价格:', item.price);
      });
    });
  }
}

2. 确保子类实例被正确存储 #

要检查Purchase类里是不是真的把Product实例存好了，比如要有一个专门的数组来管理，还要有添加Product的方法：

class Purchase {
  constructor() {
    this.products = [];
  }

  addProduct(product) {
    // 确保添加的是Product实例
    if (product instanceof Product) {
      this.products.push(product);
    }
  }
}

同样，Product类也要正确存储Item实例：

class Product {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    if (item instanceof Item) {
      this.items.push(item);
    }
  }
}

3. 调试小技巧 #

如果还是拿不到值，先在事件处理函数里打印关键信息排查：

handleSubmit() {
  console.log('当前this指向:', this); // 看是不是Purchase实例
  console.log('Purchase持有的products:', this.products); // 看数组里有没有内容
  console.log('第一个Product的items:', this.products[0]?.items); // 看Product里的Item是否存在
}

按照这些步骤调整后，点击submit时应该就能正常获取到Product和Item的变量啦～

内容的提问来源于stack exchange，提问作者fabOnReact