JavaScript 中对象方法里的 this 怎么指向当前对象-js教程-PHP中文网

javascript中this指向调用者而非定义位置：对象方法调用时指向该对象，但提取或回调时易丢失；可用bind、箭头函数或call/apply显式绑定修复。

javascript 中对象方法里的 this 怎么指向当前对象

在 JavaScript 中，对象方法里的 this 默认指向调用该方法的那个对象，但这个指向不是由“定义位置”决定的，而是由“调用方式”决定的——也就是常说的“谁调用，this 就指向谁”。

普通对象方法调用：this 指向调用者

当方法作为对象的属性被直接调用时（例如 obj.method()），this 会绑定到该对象。

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, I'm ${this.name}`); // this → person
  }
};
person.greet(); // 输出：Hello, I'm Alice

这种写法下，this 是可靠的，因为调用主体明确是 person。

避免 this 丢失：常见陷阱与修复方式

一旦方法被“单独提取”或“间接调用”，this 就容易丢失（在非严格模式下指向全局对象，在严格模式下为 undefined）：

赋值后调用：const fn = person.greet; fn(); → this 不再是 person
传入回调：setTimeout(person.greet, 100); → this 失效
事件监听器：button.addEventListener('click', person.greet); → this 指向 button

修复方法有几种：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 bind 显式绑定：setTimeout(person.greet.bind(person), 100);
用箭头函数包装（利用词法作用域）：setTimeout(() => person.greet(), 100);
在对象定义时用箭头函数（不推荐用于对象方法，因箭头函数没有自己的 this）
类中使用 class 字段语法 + 箭头函数（适用于 React 等场景）：greet = () => { console.log(this.name); };

构造函数和 class 中的 this

用 new 调用构造函数时，this 指向新创建的实例；class 中的方法默认也是绑定到实例上的（但需注意类方法本身仍是普通函数，仍可能被误调用）：

class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, ${this.name}`); // this → 实例
  }
}
const u = new User('Bob');
u.sayHi(); // Hi, Bob

但如果把 u.sayHi 提出来用，依然会丢失 this，所以 class 内部也建议对需作为回调使用的函数做绑定处理。