为什么我不能用绑定方法在类中清空数组？

Question

下面我有两个绑定方法reset和addItem的Example类。我希望这段代码记录0，但它记录4。我很好奇为什么会发生这种情况，如果有一种方法可以让它按照我期望的方式工作。

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 {array, reset, addItem} = new Example()
addItem()
addItem()
addItem()
addItem()
reset()
console.log(array.length)

Answer 1

本行

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

在对象实例化时提取array、reset和addItem的当前引用。如果稍后重新分配对象的一个属性，则先前的引用本身不会更改为指向新值。出于同样的原因，下面的日志为1，而不是2。

const obj = { num: 1 };
let { num } = obj;
obj.num = 2;
console.log(num);

对于您的代码，您可以创建一个名为getArray

的方法

class Example {
array = []
constructor () {
this.reset = this.reset.bind(this)
this.addItem = this.addItem.bind(this)
}
getArray = () => this.array;
reset () {
this.array = []
}
addItem () {
this.array.push('hello')
}
}
const {getArray, reset, addItem} = new Example()
addItem()
addItem()
addItem()
addItem()
reset()
console.log(getArray().length)

或者你可以改变数组，而不是在reset中重新分配它。

class Example {
array = []
constructor () {
this.reset = this.reset.bind(this)
this.addItem = this.addItem.bind(this)
}
reset () {
this.array.length = 0;
}
addItem () {
this.array.push('hello')
}
}
const {array, reset, addItem} = new Example()
addItem()
addItem()
addItem()
addItem()
reset()
console.log(array.length)