如何在javascript中正确使用this关键字【教程】_网络技术

发布时间 - 2026-01-30 00:00:00 点击率：次

JavaScript中this由调用时上下文动态决定；箭头函数无自有this，继承外层普通函数的this；call/apply立即执行并指定this，bind返回预设this的新函数；对象方法赋值后调用会丢失this，需bind或箭头函数字段修复。

在 JavaScript 中，this 的值不是由函数定义时决定的，而是由**函数调用时的上下文**动态绑定的——理解这点，就避开了 80% 的坑。

箭头函数没有自己的 this，它会沿作用域链向上查找外层普通函数的 this 值，而不是根据调用方式重绑。

常见错误：在事件回调或定时器中用箭头函数想捕获实例 this，结果拿到的是定义时外层的 this（比如 window 或模块顶层对象）
正确做法：需要动态 this 就用 function 声明；若需固定绑定，优先用 .bind() 或显式传参，而非依赖箭头函数“看起来像闭包”
例外场景：类方法中用箭头函数赋值给实例属性（如 handleClick = () => { ... }），此时靠的是类字段语法把函数绑定到实例，不是靠箭头函数本身的 this 行为

三者都用于手动指定函数执行时的 this，但调用时机和返回值不同。

当把对象方法赋值给变量或作为回调传入时，函数脱离原始对象调用，this 默认变为 undefined（严格模式）或全局对象（非严格模式）。

典型场景：const btn = document.getElementById('x'); btn.onclick = obj.handleClick; —— 此时 handleClick 内的 this 不再是 obj
修复方式：用 obj.handleClick.bind(obj)、() => obj.handleClick()（牺牲性能）、或在类中用字段箭头函数（handleClick = () => { ... }）
ES6 解构也会触发丢失：const { method } = obj; method(); 同样失效

用 new 调用时，this 指向新创建的实例；但若忘记 new，普通调用会导致 this 指向全局或 undefined（严格模式）。

class 构造器内部的 this 必须由 new 初始化，否则报 TypeError: Class constructor X cannot be invoked without 'new'
类方法默认不绑定 this，和普通对象方法一样存在丢失风险（不像 React class 组件的生命周期方法那样被自动绑定）
静态方法中的 this 指向类本身，而非实例；不能访问 this.xxx 实例属性

真正难的不是记住规则，而是识别「谁在调用这个函数」——遇到 this 异常，先打断点看调用栈，再查函数是如何被传递和执行的。其他所有技巧，都是对这个事实的妥协或封装。