为何使用绑定方法无法清空类中的数组？

你遇到的问题核心是引用类型的解构赋值特性：

• 当执行const {array, reset, addItem} = new Example()时，array变量保存的是实例初始状态下那个空数组的引用地址。
• 而reset方法里的this.array = []并不是清空原数组，而是给实例的array属性重新赋值了一个全新的数组。这时候，解构出来的array变量仍然指向原来的旧数组，旧数组里的4个元素并没有被删除，所以打印它的长度会是4。

简单来说：解构后的array和实例后续的this.array已经是两个完全不同的数组了。

下面几种方案都能实现你预期的输出0的效果：

方案1：保留实例引用，通过实例访问数组 #

不要解构array，而是保留整个实例的引用，每次通过实例获取当前的array属性：

class Example {
   array = []
   constructor () {
      this.reset = this.reset.bind(this)
      this.addItem = this.addItem.bind(this)
   }
   reset () {
      this.array = []
   }
   addItem () {
      this.array.push('hello')
   }
}

const example = new Example()
const {reset, addItem} = example

addItem()
addItem()
addItem()
addItem()

reset()

console.log(example.array.length) // 输出0

方案2：修改reset方法，清空原数组而非创建新数组 #

让reset直接操作原数组，清空它的内容，这样解构出来的array引用的还是同一个数组，清空后长度自然变为0：

class Example {
   array = []
   constructor () {
      this.reset = this.reset.bind(this)
      this.addItem = this.addItem.bind(this)
   }
   reset () {
      this.array.length = 0 // 直接清空原数组
      // 也可以用 this.array.splice(0) 实现同样效果
   }
   addItem () {
      this.array.push('hello')
   }
}

const {array, reset, addItem} = new Example()

addItem()
addItem()
addItem()
addItem()

reset()

console.log(array.length) // 输出0

方案3：通过getter方法获取当前数组（适合封装场景） #

如果不想直接暴露数组属性，可以给类添加一个getter方法，每次调用都返回当前实例的数组：

class Example {
   #array = [] // 用私有属性封装内部数组
   constructor () {
      this.reset = this.reset.bind(this)
      this.addItem = this.addItem.bind(this)
      this.getArray = this.getArray.bind(this)
   }
   reset () {
      this.#array = []
   }
   addItem () {
      this.#array.push('hello')
   }
   getArray() {
      return this.#array
   }
}

const {getArray, reset, addItem} = new Example()

addItem()
addItem()
addItem()
addItem()

reset()

console.log(getArray().length) // 输出0

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