JavaScript 中 this 的解析：从 call、bind 到箭头函数

但注意：函数一旦脱离对象调用，this 就会丢失：

const fn = obj.greet; 
fn(); // 非严格模式下输出 undefined（this 指向 window）

这就是为什么我们需要 call、bind 等工具来'拯救'迷失的 this。

三、call 与 apply：强制指定 this，立即执行！

原理与语法

• func.call(thisArg, arg1, arg2, ...)
• func.apply(thisArg, [arg1, arg2, ...])

两者功能相同，区别仅在于参数传递方式。

call 和 apply 的核心作用就是在调用函数的同时，显式指定 this 的值，并立刻执行该函数。

示例演示

function introduce(age) { 
  console.log(`I'm ${this.name}, ${age} years old.`); 
} 
const person = { name: 'Bob' }; 
introduce.call(person, 25); // I'm Bob, 25 years old.
introduce.apply(person, [30]); // I'm Bob, 30 years old.

即使 introduce 不是 person 的方法，我们也能让它'假装'是——这就是 this 的灵活性。

实际应用场景

• 通用工具函数适配不同上下文。
• 数组方法借用（如将类数组转为真数组）：

const args = Array.prototype.slice.call(arguments);

四、bind：永久绑定 this，延迟执行

原理与语法

func.bind(thisArg, arg1, arg2, ...) 返回一个新函数，该函数的 this 被永久绑定到 thisArg，且可预设部分参数（柯里化）。

这句话精准指出了 bind 的两大特点：

1. 常用于定时器等异步回调中绑定 this
2. 不立即执行，而是返回一个可稍后调用的函数

经典问题：setTimeout 中的 this 丢失

const timer = { 
  seconds: 0, 
  start() { 
    setInterval(function() { 
      this.seconds++; // ❌ this 指向 global/window
      console.log(this.seconds); 
    }, 1000); 
  } 
}; 
timer.start(); // 输出 NaN（因为 window.seconds 未定义）

解决方案一：使用 bind

const timer = { 
  seconds: 0, 
  start() { 
    setInterval(function() { 
      this.seconds++; 
      console.log(this.seconds); 
    }.bind(this), 1000); // ✅ 绑定外层 this
  } 
}; 
timer.start(); // 1, 2, 3...

这里，.bind(this) 创建了一个新函数，其 this 永久指向 timer 对象，无论何时被调用都不会改变。

解决方案二：that = this（闭包保存）

这是 ES5 时代的经典写法：

const timer = { 
  seconds: 0, 
  start() { 
    const that = this; // 保存 this 到变量
    setInterval(function() { 
      that.seconds++; // 通过闭包访问
      console.log(that.seconds); 
    }, 1000); 
  } 
}; 

虽然有效，但需要额外变量，且在深层嵌套中容易混乱。bind 更加声明式和安全。

五、箭头函数：没有 this 的'佛系'函数

核心特性

箭头函数（Arrow Function）没有自己的 this。它不会创建新的 this 上下文，而是词法地继承外层作用域的 this。

• '放弃了自己的 this' → 箭头函数内部不存在 this 绑定。
• '指向父级作用域的 this' → 它的 this 由定义时的外层作用域决定，与调用方式无关。

示例对比

普通函数（this 丢失）

const obj = { 
  name: 'David', 
  delayedLog() { 
    setTimeout(function() { 
      console.log(this.name); // ❌ undefined
    }, 100); 
  } 
}; 
obj.delayedLog();

箭头函数（自动继承）

const obj = { 
  name: 'Cherry', 
  delayedLog() { 
    setTimeout(() => { 
      console.log(this.name); // ✅ "Cherry"
    }, 100); 
  } 
}; 
obj.delayedLog();

为什么能成功？因为箭头函数的 this 继承自 delayedLog 方法，而 delayedLog 的 this 指向 obj。

箭头函数的不可变性

由于箭头函数没有 this，所以以下操作无效：

const fn = () => console.log(this.name); 
const obj = { name: 'Eve' }; 
fn.call(obj); // 仍输出全局作用域的 name（或 undefined）
fn.bind(obj)(); // 同上

call、apply、bind 对箭头函数的 this毫无影响。

适用场景 vs 陷阱

✅ 适合：

• 回调函数（如 map, filter, setTimeout）
• 避免 that = this 的样板代码

❌ 不适合：

• 对象方法（会继承外层 this，可能不是对象本身）
• 构造函数（箭头函数不能用 new 调用）
• 需要动态 this 的场景

六、综合案例：四种方式对比

假设我们有一个计数器对象，需要在 1 秒后打印当前值：

const counter = { 
  count: 0, 
  // 方式 1：普通函数 + that = this
  method1() { 
    const self = this; 
    setTimeout(function() { 
      console.log('method1:', self.count); 
    }, 1000); 
  }, 
  // 方式 2：bind
  method2() { 
    setTimeout(function() { 
      console.log('method2:', this.count); 
    }.bind(this), 1000); 
  }, 
  // 方式 3：箭头函数
  method3() { 
    setTimeout(() => { 
      console.log('method3:', this.count); 
    }, 1000); 
  }, 
  // 方式 4：call（需立即执行，不适合定时器，但可模拟）
  method4() { 
    const fn = function() { 
      console.log('method4:', this.count); 
    }; 
    setTimeout(() => fn.call(this), 1000); // 结合箭头+call
  } 
}; 
counter.method1(); // 0
counter.method2(); // 0
counter.method3(); // 0
counter.method4(); // 0

四种方式都能正确输出，但箭头函数最简洁，bind 最显式，that = this 最传统。

七、this 绑定优先级总结

当多个规则同时存在时，JavaScript 按以下优先级确定 this：

1. new 绑定（构造函数）→ 最高
2. 显式绑定（call / apply / bind）
3. 隐式绑定（对象方法调用，如 obj.fn()）
4. 默认绑定（独立函数调用）

箭头函数不参与此规则，因为它根本没有 this。

八、常见误区与最佳实践

误区 1：认为箭头函数总是更好

错！箭头函数在对象方法中会导致 this 指向外层（可能是全局）：

const badObj = { 
  name: 'Bad', 
  getName: () => this.name // ❌ this 指向全局
}; 
console.log(badObj.getName()); // undefined

应使用普通函数：

const goodObj = { 
  name: 'Good', 
  getName() { 
    return this.name; // ✅
  } 
}; 

误区 2：bind 后还能被 call 覆盖

不能！bind 创建的函数其 this 是永久锁定的：

function f() { console.log(this.x); } 
const bound = f.bind({x: 1}); 
bound.call({x: 2}); // 输出 1，不是 2！

最佳实践

• 在类方法或对象方法中，使用普通函数。
• 在回调、事件监听、定时器中，优先考虑箭头函数。
• 若需兼容旧环境或需要预设参数，使用 bind。
• 避免过度使用 that = this，除非在不支持箭头函数的环境中。

九、结语：掌握 this，就是掌握 JavaScript 的灵魂

现在，我们不仅读懂了它，更理解了其背后的技术哲学：

• call/apply 是'命令式'的干预——我要你现在就用这个 this！
• bind 是'防御式'的设计——无论何时调用，都必须用这个 this！
• that = this 是'妥协式'的智慧——既然你靠不住，我就自己存一份！
• 箭头函数 是'声明式'的优雅——我不需要 this，我信任我的上下文！

JavaScript 的魅力，正在于这种灵活性与规则性的统一。当你能自如地在这些工具之间切换，你就不再是 this 的奴隶，而是它的主人。

愿你在未来的代码中，不再对 this 感到迷茫，而是微笑着说：

'我知道你是谁，也知道你该去哪。'