JavaScript `this` 关键字完全指南：call/apply/bind 的实战应用

JavaScript 中的 this 关键字是这门语言最强大也最令人困惑的特性之一。本文将全面剖析 this 的工作机制，深入探讨 call、 apply 和 bind 方法的实战应用，并通过丰富的代码示例、对比表格和可视化图表，帮助您彻底掌握这些核心概念。

1. this 关键字基础

1.1 this 的绑定规则

JavaScript 中的 this 值由函数的调用方式决定，主要有四种绑定规则：

绑定类型	调用方式	this 指向	优先级
默认绑定	独立函数调用	全局对象(严格模式undefined)	4
隐式绑定	作为对象方法调用	调用对象	3
显式绑定	使用call/apply/bind调用	指定的对象	2
new 绑定	使用new构造函数调用	新创建的对象	1

1.2 this 绑定示例代码

// 默认绑定
function showThis() {
   
   
  console.log(this);
}
showThis(); // 浏览器中: Window, Node.js中: global

// 隐式绑定
const user = {
   
   
  name: 'Alice',
  greet() {
   
   
    console.log(`Hello, ${
     
     this.name}`);
  }
};
user.greet(); // Hello, Alice

// 显式绑定
function introduce(lang, level) {
   
   
  console.log(`I code in ${
     
     lang} at ${
     
     level} level and I'm ${
     
     this.name}`);
}
introduce.call(user, 'JavaScript', 'advanced');

// new 绑定
function Person(name) {
   
   
  this.name = name;
}
const bob = new Person('Bob');
console.log(bob.name); // Bob

2. 显式绑定方法深度解析

2.1 call/apply/bind 对比

方法	参数传递方式	立即执行	返回	使用场景
call	参数逐个传递	是	函数执行结果	需要立即调用并指定this
apply	参数作为数组传递	是	函数执行结果	参数已是数组或类数组
bind	参数逐个传递	否	绑定this的新函数	需要延迟执行或固定this

2.2 方法签名与基本用法

// 方法签名
func.call(thisArg, arg1, arg2, ...)
func.apply(thisArg, [argsArray])
func.bind(thisArg, arg1, arg2, ...)

// 基本用法示例
const person = {
   
    name: 'Alice' };

function greet(greeting, punctuation) {
   
   
  console.log(`${
     
     greeting}, ${
     
     this.name}${
     
     punctuation}`);
}

greet.call(person, 'Hello', '!');        // Hello, Alice!
greet.apply(person, ['Hi', '!!']);      // Hi, Alice!!
const boundGreet = greet.bind(person, 'Hey');
boundGreet('!!!');                      // Hey, Alice!!!

3. call 方法实战应用

3.1 借用数组方法

// 类数组对象使用数组方法
function sumArguments() {
   
   
  // arguments 是类数组对象，没有数组方法
  return Array.prototype.reduce.call(arguments, (acc, curr) => acc + curr, 0);
}
sumArguments(1, 2, 3); // 6

// DOM 节点列表操作
const divs = document.querySelectorAll('div');
Array.prototype.forEach.call(divs, div => {
   
   
  div.style.color = 'red';
});

3.2 实现继承链

function Product(name, price) {
   
   
  this.name = name;
  this.price = price;
}

function Food(name, price, category) {
   
   
  Product.call(this, name, price); // 调用父类构造函数
  this.category = category;
}

const cheese = new Food('Cheese', 5, 'Dairy');

3.3 性能优化技巧

// 避免在循环中重复查找方法
const slice = Array.prototype.slice;
function toArray(args) {
   
   
  return slice.call(args);
}

// 更快的函数调用 (比普通调用稍快)
function fastCall(fn, context, ...args) {
   
   
  return fn.call(context, ...args);
}

4. apply 方法高级用法