JavaScript 中 this 的绑定机制与用法详解

2、函数中的 this

四、对象方法中的 this

const user = {
  name: '张三',
  age: 25,
  // 方法中的 this 指向调用它的对象
  introduce() {
    console.log(`我叫${this.name}，今年${this.age}岁`);
    return this; // 返回 this 可以实现链式调用
  },
  // 箭头函数作为方法（不推荐）
  sayHi: () => {
    console.log(`Hi, ${this.name}`); // this 指向全局
  },
  // 嵌套方法
  nested: {
    getName() {
      console.log(this); // 指向 nested 对象，不是 user
    }
  }
};
user.introduce(); // 我叫张三，今年 25 岁
user.sayHi(); // Hi, undefined
user.nested.getName(); // { getName: [Function: getName] }

链式调用：

const calculator = {
  value: 0,
  add(num) {
    this.value += num;
    return this; // 关键：返回 this
  },
  subtract(num) {
    this.value -= num;
    return this;
  },
  multiply(num) {
    this.value *= num;
    return this;
  },
  getResult() {
    return this.value;
  }
};
const result = calculator.add(10)
  .multiply(2)
  .subtract(5)
  .add(3)
  .getResult();
console.log(result); // (10 * 2 - 5 + 3) = 18

五、改变 this 指向

1、call() 立刻调用

2、apply() 立即调用（参数为数组）

3、bind() 创建新函数

const car = { brand: 'Toyota', getBrand() { return this.brand; } };
const bike = { brand: 'Giant' };
// 绑定到 bike 对象
const getBikeBrand = car.getBrand.bind(bike);
console.log(getBikeBrand()); // Giant

// 部分应用（柯里化）
function multiply(a, b) { return a * b; }
const double = multiply.bind(null, 2);
console.log(double(5)); // 10
console.log(double(10)); // 20

// 事件处理中的绑定
class Button {
  constructor() {
    this.text = '点击我';
    // 绑定 this，确保事件处理函数能访问实例属性
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(`按钮文字：${this.text}`);
  }
}

bind 创建的绑定函数再次调用 bind 是无效的，故 bind 只能绑定一次。

使用 new 调用 bind 创建的函数时，bind 绑定的 this 会被忽略，this 指向新创建的对象。

六、构造函数中的 this

// 构造函数（首字母大写）
function Person(name, age) {
  // 使用 new 调用时，this 指向新创建的对象
  this.name = name;
  this.age = age;
  // 方法定义（每个实例都会创建新函数，不推荐）
  this.sayHello = function() {
    console.log(`你好，我是${this.name}`);
  };
}
// 在原型上定义方法（推荐）
Person.prototype.introduce = function() {
  console.log(`我叫${this.name}，${this.age}岁`);
};
const person1 = new Person('王五', 30);
const person2 = new Person('赵六', 25);
person1.introduce(); // 我叫王五，30 岁
person2.introduce(); // 我叫赵六，25 岁
console.log(person1 instanceof Person); // true

七、箭头函数中的 this

// 箭头函数没有自己的 this，继承外层作用域的 this
const obj = {
  name: '箭头函数示例',
  // 常规方法
  regularMethod() {
    console.log('常规方法 this:', this); // obj
    // 嵌套函数
    function nestedRegular() {
      console.log('嵌套常规函数 this:', this); // undefined/全局
    }
    nestedRegular();
    // 嵌套箭头函数
    const nestedArrow = () => {
      console.log('嵌套箭头函数 this:', this); // obj（继承外层）
    };
    nestedArrow();
  },
  // 箭头函数作为方法（不推荐）
  arrowMethod: () => {
    console.log('箭头方法 this:', this); // 全局/外层
  }
};
obj.regularMethod();
obj.arrowMethod();

// 适合使用箭头函数的场景
const timer = {
  seconds: 0,
  start() {
    // 箭头函数保持 this 指向
    setInterval(() => {
      this.seconds++;
      console.log(`已过 ${this.seconds} 秒`);
    }, 1000);
  }
};
timer.start();

注意：箭头函数一般没有自己的 this，他会指向外层 this。

八、回调函数中 this 的问题

// 问题：回调函数中的 this 丢失
const dataProcessor = {
  data: [1, 2, 3, 4, 5],
  multiplier: 2,
  processWithIssue() {
    // forEach 回调中的 this 不是 dataProcessor
    return this.data.map(function(item) {
      return item * this.multiplier; // 错误！this 是 undefined/全局
    });
  },
  // 解决方案 1：使用 self/that/me 保存 this
  processWithSelf() {
    const self = this;
    return this.data.map(function(item) {
      return item * self.multiplier;
    });
  },
  // 解决方案 2：使用箭头函数（推荐）
  processWithArrow() {
    return this.data.map(item => item * this.multiplier);
  },
  // 解决方案 3：使用 bind
  processWithBind() {
    return this.data.map(function(item) {
      return item * this.multiplier;
    }.bind(this));
  },
  // 解决方案 4：传递 thisArg 参数
  processWithThisArg() {
    return this.data.map(function(item) {
      return item * this.multiplier;
    }, this); // map 的第二个参数
  },
  // 解决方案 5：使用 for...of
  processWithForOf() {
    const result = [];
    for (const item of this.data) {
      result.push(item * this.multiplier);
    }
    return result;
  }
};
console.log(dataProcessor.processWithArrow()); // [2, 4, 6, 8, 10]

总结：

• 箭头函数：继承定义时的外层 this；
• 普通函数：取决于调用方式，谁调用指向谁；
• 定时器回调：由于系统调用，普通函数会丢失 this 绑定（或理解为定时器回调函数的全称为 window.setTimeout()）。