JS原型方法被提取后this丢失，因函数与原对象解耦；解决法：1.bind显式绑定；2.构造函数中预绑定；3.箭头函数封装；4.类字段+箭头函数自动绑定。

JS 原型对象上绑定方法时，如果直接赋值给变量或传入回调（比如事件监听、定时器、Promise.then），this 会丢失，指向全局或 undefined（严格模式）。这不是原型本身的问题，而是函数调用时的上下文绑定机制决定的。关键在于：**方法从原型取出来后，就和原型对象解耦了**。

用 bind 显式绑定 this

在从原型获取方法后，立即用 bind 绑定目标实例：

• class Person { say() { console.log(this.name); } }
  const p = new Person(); p.name = 'Alice';
  const fn = p.say.bind(p); // ✅ 固定 this 指向 p
  setTimeout(fn, 100); // 输出 'Alice'
• 适用于需要复用同一绑定函数多次的场景，但每次 bind 都生成新函数，注意内存和相等性（fn1 !== fn2 即使绑同一个对象）

在构造函数中预绑定（推荐用于实例方法）

把绑定操作提前到实例创建时，避免每次调用都 bind：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• class Button {
    constructor(el) {
      this.el = el;
      this.handleClick = this.handleClick.bind(this); // ✅ 在 this 确定后立即绑定
    }
    handleClick() { console.log(this.el); }
  }
• 适合生命周期明确、实例数量可控的场景；缺点是每个实例多存一份函数引用

用箭头函数封装（简洁但注意适用边界）

箭头函数不绑定自己的 this，而是继承外层词法作用域的 this —— 构造函数或类字段中定义时，它自然捕获实例：

• class Timer {
    constructor() { this.count = 0; }
    start() {
      this.interval = setInterval(() => {
        this.count++; // ✅ this 正确指向实例
      }, 1000);
    }
  }
• 不能用于原型方法定义（箭头函数不能作为 prototype 方法），只能用于实例属性或内联回调

ES6 类字段语法 + 箭头函数（现代写法）

利用类字段自动在实例上创建箭头函数属性，语义清晰且无需手动 bind：

• class InputHandler {
    constructor(input) { this.input = input; }
    // ✅ 自动绑定，this 永远是实例
    handleChange = (e) => { console.log(this.input.value); };
    init() { this.input.addEventListener('input', this.handleChange); }
  }
• 需确保环境支持（现代浏览器或经 Babel/TS 编译），是目前最常用、可读性高的方案