JavaScript开发者的“this困境”：痛点直击

尽管理解了this的规则，但在实际开发中仍会遇到各种意外情况。

1. 回调函数中的this丢失

当函数作为回调传递给其他函数时默认情况下会发生默认绑定。导致this指向全局对象或

const obj = {
至于name，"张三",print: function {
setTimeout {
console.log;// 全局或 undefined
},1000);}
}，obj.print;

方法：

• 箭头函数：继承外层作用域的this

  print: function {
  setTimeout => {
  console.log;// 张三
  },1000);}
  

• 显式绑定：使用bind

  print: function {
  setTimeout {
  console.log;}.bind,1000);// 张三
  }
  

• 缓存this：通过变量保存上下文

  print: function {
  const self = this;setTimeout {
  console.log;// 张三
  },1000);}
  

2. 对象方法赋值后this丢失

当将对象方法赋值给其他变量或作为参数传递时会导致隐式绑定失效，从而触发默认绑定。

const obj = {
name的观点是。"李四",printName: function { console.log }
};const printFunc = obj.printName;其实，printFunc;// 全局或 undefined
// 数组遍历也存在相同问题
.forEach;// 同上结果

方法：同上回调函数处理方案。

3. 构造函数内部返回对象导致实例化失败

如果构造函数内部显式返回一个对象，new操作会忽略原有实例而直接返回该对象。此时this可能指向意想不到的地方。

function User {
this.name = name;return { name: "王五" };// 忽略new创建的实例！说起来，}
const user = new User;console.log，// "王五"
console.log;// false，

六、与常用方法：如何驯服“野蛮”的this？

1. 是否为new调用？→指向新创建的实例，否则继续...
2. 是否显式绑定？→指向指定对象，按理说，否则继续...
3. 是否隐式绑定？→指向调用它的对象，否则...
4. 默认绑定！→非严格模式为全局对象，严格模式为undefined；说起来，情况:
   • - 箭头函数继承上下文this！
   • - DOM事件处理器自动绑定到目标元素！不过，
   • - class中的箭头方法自动将类实例作为上下文！

class User {
constructor{...}
getProfile = => {...};}