为什么解构参数对象会影响它的 'this' 值？

Question

有人可以告诉我为什么 解构会影响对象的this 值。有很多简单的解决方法，但我只想知道这里到底发生了什么。看起来它应该可以工作，但是由于解构导致 this 作用域发生了一些奇怪的事情。有人知道吗？

这是一个简单的对象：

const user = {
  name: 'John',
  age: 30,
  sayHi() {
    console.log(this); // undefined for foo(), but defined for bar()
    return `hello, ${this.name}`;
  }
};

在 foo 中，我使用解构来访问对象键，但是 this 值在 sayHi() 中未定义。

const foo = ({ sayHi, name }) => {
  console.log(sayHi()); // hello, [empty string]
  console.log('OUTPUT: foo ->  name', name); // John
};

foo(user);

但是在这里，只是传递对象而不进行解构，按预期工作并且定义了 this 值。

const bar = person => {
  console.log(person.sayHi()); // hello, John
};

bar(user);

Answer 1

在第一种情况下，您通过解构创建了对 sayHi 函数的单独引用。当您随后从 foo 的主体调用它时，这将成为 sayHi 主体中 this 的上下文。

在第二种情况下，您将其称为 person.sayHi，因此本例中的上下文是包含对象 - 即 person。在sayHi中，this是person，并且定义了名称。

解构并没有什么神奇之处，如果您手动创建对函数的引用，您将获得相同的效果：

const bar = person => {
  const sayHi = person.sayHi;
  console.log(sayHi()); 
};

为什么解构参数对象会影响它的 'this' 值？

Why does destructuring an argument object affect it's 'this' value?

javascript

scope

this

destructuring

但是在这里，只是传递对象而不进行解构，按预期工作并且定义了 this 值。