javscript的this指向问题，看这一篇就够了

在JavaScript中，this关键字的指向一直是个头痛的问题。总的来说取决于函数调用上下文，下面是我总结的涵盖几乎所有情况this的指向场景：

1. 全局作用域或严格模式下

   • 在全局作用域中声明的函数或直接在脚本顶部运行的代码块，this通常指向全局对象（在浏览器环境下是window对象，在Node.js环境中是global对象）。

2. 函数调用

   • 当函数作为普通函数调用时，this也会指向全局对象（严格模式下为undefined）。

3. 对象方法调用

   • 当函数作为对象的属性被调用时，this指向调用该方法的对象。

     const obj = { method: function() { console.log(this); // 这里 this 指向 obj } }; obj.method();

4. 构造函数调用

   • 当使用 new 关键字调用函数时，它会创建一个新的对象，this会被绑定到新创建的对象上。

     function Person(name) { this.name = name; } const p = new Person('Tom');

5. 函数上下文调用：call、apply、bind

   • Function.prototype.call(), Function.prototype.apply() 和 Function.prototype.bind() 方法可以明确指定函数调用时的 this 值。

     function foo() { console.log(this); } const obj = {name: 'Tom'}; foo.call(obj); // this 指向 obj

6. 事件处理器

   • 在HTML DOM事件处理函数中，this通常指向触发事件的DOM元素。

     Html1Click me

   当点击按钮时，this将指向按钮元素。

7. 箭头函数

   • 箭头函数（Arrow functions）没有自己的this，它们会捕获其所在的词法作用域的this值。这意味着箭头函数不会创建新的this上下文，它的this值来自于外部（封闭）作用域。

8. ES6 Class 中的方法

   • 类（Class）的方法默认使用严格模式，但即使如此，类方法里的this依旧指向类的实例对象。

     class MyClass { constructor() { this.value = 'Hello'; }

     myMethod() { console.log(this.value); // this 指向 MyClass 的实例 } } const instance = new MyClass(); instance.myMethod();

9. Promise 和 async/await

   • Promise回调中的this通常不会保留原上下文，除非使用.bind()方法进行绑定。async函数内部的this也同样遵循箭头函数的规则，指向外层作用域的this。

总结起来，this的指向依赖于函数调用方式和作用域，了解这些规则有助于正确理解和运用this关键字。