JavaScript按引用存储值：为何delete变量无法删除原对象？

嘿，这个问题其实戳中了JavaScript里引用类型的一个关键细节，我当初刚学JS的时候也踩过一模一样的坑！咱们一步步拆解来看：

为什么delete obj无效，但delete this.panel.items[item_id]可行？ #

首先得搞清楚JavaScript里「变量赋值引用类型」的本质：

• 当你执行var obj = this.panel.items[item_id];时，obj并不是直接“指向”原对象的指针，而是存储了原对象在内存中的地址值。换句话说，obj是一个独立的变量，它和this.panel.items[item_id]是两个不同的“引用入口”，但它们都指向同一个内存中的对象。
• delete obj;这个操作，只是把obj这个变量本身从当前作用域里移除了，相当于切断了obj和原对象的联系，但完全不会影响this.panel.items[item_id]这个属性对原对象的引用，更不会删除原对象本身。
• 而delete this.panel.items[item_id];是直接操作this.panel.items这个父对象，删除它身上的item_id属性。这时候原对象失去了在items里的引用（如果没有其他地方引用它，JS的垃圾回收机制后续会把它清理掉），所以看起来像是“删除了目标对象”。

怎么实现通过变量操作删除原对象的引用？ #

JavaScript里没有其他语言那种直接指向属性的指针，但我们可以换个思路：操作包含目标属性的父对象，而不是属性值的引用。比如：

方法1：直接引用父对象+属性名 #

removeItem: function(item_id) {
  // 保存父对象和属性名
  var itemsObj = this.panel.items;
  var targetKey = item_id;
  
  // 直接通过父对象删除属性，等同于操作原属性
  delete itemsObj[targetKey];
}

方法2：封装成引用对象（更灵活） #

如果需要把这个引用传递到其他地方使用，可以封装成一个简单的对象来保存父对象和属性名：

removeItem: function(item_id) {
  var objRef = {
    parent: this.panel.items,
    key: item_id
  };
  
  // 后续任何地方使用这个objRef，都能删除原属性
  delete objRef.parent[objRef.key];
}

核心逻辑就是：你没法让一个变量直接绑定到某个对象的属性上，但你可以保存这个属性的“归属信息”（父对象+属性名），通过这个信息来操作原属性。

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