Question

我在this site中发现了以下代码（不包括console.log东西）：

console.log((function(x, f = () => x) {
  var x;
  // console.log(this.x,x); // undefined 1
  var y = x;
  x = 2;
  return [x, y, f()];
})(1)); // [2, 1, 1]

显然，f()具有与x相同的结果，这些结果正在参数中传递。如果您取消注释console.log(this.x,x)，它将显示undefined和1。

我已阅读以下内容：

What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?

What is the difference between () => {} and function() {} in react-native javascript?

What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

What does this refer to in a JavaScript function?

How does the "this" keyword work?

this - JavaScript | MDN

我的问题是，即使设置了this.x，为什么var x = 2仍返回未定义？请参考以下代码段：

console.log((function(x, f = () => x) {
  var x = 2;
  console.log(this.x,x); // undefined 2
  var y = x;
  x = 2;
  return [x, y, f()];
})(1)); // [2, 2, 1]

，如果您删除了var x

console.log((function(x, f = () => x) {
  console.log(this.x,x); // undefined 1
  var y = x;
  x = 2;
  return [x, y, f()];
})(1)); // [2, 1, 2]

this.x是否指向参数或局部变量？

Answer 1

如我所见，以上函数是一个自执行函数或IIFE（立即调用函数表达式）。这些块不是方法，这意味着这些块不会被称为对象的属性，因此会在全局范围内执行。

因此，表达式中的this是指未定义变量x的全局范围上下文，因此，安慰this.x将返回未定义。

我在互联网上找到了一个很棒的博客来解释这一点，希望这将有助于您更好地理解它。 https://www.bennadel.com/blog/2264-changing-the-execution-context-of-your-self-executing-function-blocks-in-javascript.htm

Answer 2

摘自Kyle Simpson的书You don't know JS

这实际上是在调用函数时进行的绑定，其引用完全由调用该函数的调用站点确定。

如果要弄清楚this指的是什么，请遵循4条规则。

有新电话吗？使用新构造的对象。
是通过通话还是申请（或绑定）通话？使用指定的对象。
由拥有该调用的上下文对象调用了吗？使用该上下文对象。
默认：在严格模式下未定义，否则为全局对象。

在这里，this引用了全局对象，这就是this.x未定义的原因。如果要强制执行，可以使用bind。

如果您想了解有关所有技术的更多信息，请阅读this

这有什么问题。函数返回未定义的变量

2 个答案: