【今日坑】断点查看的时候,this总是undefined?

image

是不是ccc的编译有坑啊?每个函数里面的this都是undefined?
这里的this实际上不是undefined,是可以正常运行的,但是为什么断点缺没有值了?

发现输入_this的时候,有值,且等于this。
啊这!!!

在 TypeScript(以及 JavaScript)中,异步方法执行时 this 变为 undefined 的情况通常发生在以下几种场景:

  1. 箭头函数与非箭头函数的差异:
    • 非箭头函数(普通函数):在定义函数时,this 的绑定是在调用时确定的,这称为动态 this 绑定。如果在异步函数中没有特别绑定 this,当异步操作完成时,this 可能不会指向你期望的对象,而是指向全局对象(在浏览器中是 window,在 Node.js 中是 global)。在严格模式下(use strict),未绑定的 this 会是 undefined。
    • 箭头函数:箭头函数没有自己的 this 绑定,它会捕获其词法环境中的 this 值。这意味着在异步操作中,箭头函数内的 this 将保持定义时的 this 值,从而避免了 this 成为 undefined 的问题。
  2. 异步回调和Promise: 当你在事件监听器、Promise 的 .then 或者 .catch 方法中使用非箭头函数时,this 的绑定可能会丢失。这是因为这些方法在执行回调时并不保留外部函数的 this 上下文。
  3. 类方法和原型链: 在类中定义的方法默认不是箭头函数,因此它们遵循传统的 this 绑定规则。如果你在一个类的方法中启动了一个异步操作,并且在回调或Promise链中引用了 this,如果没有额外的绑定(如使用 .bind(this) 或者使用箭头函数),this 可能会被错误地绑定,从而成为 undefined。
  4. Async/Await: 在使用 async/await 的异步函数中,如果异步函数是在类的成员函数中定义的,那么 this 的绑定规则与普通函数相同。然而,如果 async 函数是在类的方法内部定义的匿名函数或变量,则需要额外注意 this 的绑定,因为它可能不会自动绑定到类实例上。
    为了避免 this 变为 undefined,你可以采取以下措施:
    • 使用箭头函数,因为它们会捕获定义时的 this 值。
    • 明确绑定 this,例如使用 .bind(this)。
    • 使用类字段语法(在ES6+中可用)来定义方法,这会自动绑定 this 到类实例。
    • 在构造函数或其他初始化代码中,将 this 的引用存储到一个变量中,比如 self = this;,然后在异步代码中使用这个变量。
    • 如果你使用的是 TypeScript,可以使用 this 类型注解来显式指定 this 的类型,但这并不改变 this 的实际绑定行为,只是有助于类型检查。
    总之,理解 this 的绑定规则并在适当的地方应用绑定策略是避免 this 成为 undefined 的关键。

内容由AI生成

不断点可以正常运行是吧,我建议断在下一行/。。。

1赞

vscode的毛病,估计是编译后的代码就是 _this,但是 chrome 做了处理吧

1赞

异步会这样,let self =this。目前没有更好办法

1赞

beginGame = async () => {} 这样写就可以了

1赞

Cocos 这块很坑人,在 preview 模式没报错,构建后 this 指向就变了。

所以建议多使用 const self = this 保险。

1赞