我试图更好地理解 `this` 的用法。这个例子很冗长，但它的目的是为了更好地理解[重复]

Posted 2023-02-22

【中文标题】我试图更好地理解 `this` 的用法。这个例子很冗长，但它的目的是为了更好地理解[重复]

【英文标题】：I'm trying to better understand the use of `this`. The example is verbose, but its for the purpose of trying to better understand [duplicate]

【发布时间】：2019-11-16 09:23:17

【问题描述】：

我试图更好地理解this 的用法。在试验这段代码时，我发现我可以使用console.log(this.arr[4]) 之类的东西访问arr 中的项目，但前提是arr 是使用var 声明的。如果我使用let 或const 声明arr，我会得到一个TypeError。

首先，我明白这很冗长。就像我说的那样，我只是在尝试尝试更好地理解并遇到这个问题，这激起了我的好奇心。

const arr = [
  1,
  false,
  
    name: 'John',
    address: '123 Peachtree Drive'
  ,
  function(name = 'new user') 
    const greeting = 'Hello there, '
    console.log(greeting + name)
  ,
  'foo',
]

console.log(this.arr[4])

同样，如果我只是使用 var 而不是 let 声明 arr，我可以很好地记录它。

【问题讨论】：

this 没有意义，应该只是console.log(arr[4])

你应该阅读"this"，这里没有合适的问题要回答。

您没有在代码示例中使用let...也就是说，使用“piqued”做得很好:)。

@epascarello。我知道我可以使用console.log(arr[4])。我的想法是，我认为 console.log(this.arr[4]) 会产生相同的结果，但事实并非如此。

【参考方案1】：

在浏览器中，***this 是window，***var 声明也使变量可以作为window 的属性访问，而let 和const 则不能。引用arr 的正确方法很简单

console.log(arr[4])

我不鼓励您使用*** this 甚至访问 var 声明，因为依赖于 var 行为的代码显然是令人困惑的，因为这种情况是一个完美的例子。

【参考方案2】：

您感到困惑的行为并非特定于“this”。它与范围有关。 'var' 的作用域与 'let' 或 'const' 不同。

var - has function level scoping and can change the value reference
let - has block level scoping and can change the value reference
const - has block level scoping but cannot change the value reference

https://love2dev.com/blog/javascript-var-let-const/

准确说明声明变量的方式和位置，因为这是 JavaScript 语法/解释的重要部分。