JavaScript函数内部嵌套函数的this指向困惑求解

嘿，这个问题真的是JavaScript学习者绕不开的经典坑！我来帮你把this的逻辑捋得明明白白，建立一套统一的判断准则。

首先，你之前的部分理解是对的，但有个核心误区：this的指向从来不是由函数的定义位置决定的，而是完全由函数的调用方式决定的。这是掌握this的核心原则，记住它，很多困惑就迎刃而解了。

一套统一的this判定规则 #

我们可以按优先级从高到低来判断：

• 1. 箭头函数：箭头函数没有自己的this，它会直接继承外层作用域中的this值，不管怎么调用都不会改变。
• 2. 构造函数调用（new关键字）：当用new调用函数时，this指向新创建的实例对象。
• 3. call/apply/bind显式绑定：这三个方法可以手动指定this的指向，优先级高于普通调用。
• 4. 对象方法调用：如果函数是作为某个对象的方法被调用（比如obj.fn()），this指向调用这个方法的对象obj。
• 5. 普通函数调用（默认绑定）：如果以上情况都不满足，直接调用函数（比如fn()），非严格模式下this指向全局对象（浏览器里就是Window），严格模式下是undefined。

拆解你的代码疑惑 #

来看你的代码：

function test(){
  function method(){
    console.log(this);
  }
  method(); // 重点在这里！
}
test()

你以为method嵌套在test里，this就指向test？但实际上，method()是普通函数调用（直接调用），完全符合上面的第5条规则。此时不管method定义在哪个函数里面，只要是直接调用，非严格模式下this就指向全局的Window对象。

那如果想让method里的this指向test函数，给你几个常见方案：

1. 用call显式绑定：

   function test(){
     function method(){
       console.log(this); // 现在指向test函数
     }
     method.call(this); // 把test的this传给method
   }
   test()
   

2. 用变量保存this（经典的that/self技巧）：

   function test(){
     const that = this; // 保存test的this到变量
     function method(){
       console.log(that); // 用that代替this，指向test
     }
     method();
   }
   test()
   

3. 改用箭头函数：

   function test(){
     const method = () => {
       console.log(this); // 箭头函数继承test的this
     }
     method();
   }
   test()
   

最后再巩固核心认知 #

每次遇到this的问题，别先想函数定义在哪，先问自己：这个函数是怎么被调用的？ 然后对应上面的规则去判断，就能精准确定this的指向了。

内容的提问来源于stack exchange，提问作者Jake