当前位置：首页 > 文章列表 > 文章 > 前端 > JS中this指向及绑定方法解析

JS中this指向及绑定方法解析

2026-01-02 13:21:44 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JS中this指向什么？如何正确绑定上下文？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

普通函数调用时this指向全局对象或undefined；箭头函数不绑定this，继承外层作用域；call/apply立即执行并传参，bind返回绑定this的新函数；类方法需手动绑定this以防丢失。

Javascript的this关键字指向什么_如何准确绑定Javascript中this的上下文？

普通函数调用时，`this` 指向全局对象或 `undefined`

在非严格模式下，直接调用函数（如 foo()），this 指向 window（浏览器）或 global（Node.js）；严格模式下则为 undefined。这不是“意外”，而是语言规范明确规定的默认绑定行为。

容易踩的坑是：把对象方法赋值给变量后调用，丢失原始上下文：

const obj = {
  name: 'Alice',
  say() { console.log(this.name); }
};
const fn = obj.say;
fn(); // undefined（严格模式）或报错（因为 window.name 通常不是预期值）

这不是 say 写错了，是调用位置决定了 this
箭头函数不绑定 this，它继承外层作用域的 this，所以不能靠它“修复”这种丢失
类方法默认不绑定，React 类组件中常见 onClick={this.handleClick} 报 this is undefined 就源于此

`call`、`apply` 和 `bind` 的区别与适用场景

三者都用于显式控制 this，但执行时机和参数传入方式不同：

func.call(obj, arg1, arg2)：立即执行，参数逐个列出
func.apply(obj, [arg1, arg2])：立即执行，参数以数组形式传入
const bound = func.bind(obj, arg1)：返回新函数，不执行；后续调用时 this 固定为 obj，且预置部分参数

典型用例：

function log(prefix, msg) { console.log(`${prefix}: ${this.name} - ${msg}`); }
const user = { name: 'Bob' };
<p>log.call(user, '[INFO]', 'loaded'); // [INFO]: Bob - loaded
log.apply(user, ['[WARN]', 'timeout']); // [WARN]: Bob - timeout
const warnUser = log.bind(user, '[WARN]');
warnUser('failed'); // [WARN]: Bob - failed</p>

bind 常用于事件监听器或回调中固化上下文，但注意：它会创建新函数，频繁调用可能影响性能或导致移除监听器失败（因引用不一致）。

箭头函数的 `this` 是词法绑定，无法被改变

箭头函数没有自己的 this，它沿作用域链向上查找，取最近一层普通函数的 this 值。这意味着：call/apply/bind 对它无效，new 也不可用。

常见误用：

const obj = {
  name: 'Charlie',
  regular() { return this.name; },
  arrow: () => this.name // 这里的 this 指向定义时的外层，不是 obj
};
obj.regular(); // 'Charlie'
obj.arrow();   // 可能是 undefined 或全局 name，取决于外层环境

若想在对象字面量中用箭头函数访问自身属性，必须在外层函数中捕获 this，例如：const self = this; const arrow = () => self.name;
类字段中的箭头函数（handler = () => {...}）之所以能正确访问 this，是因为它在构造函数执行时被初始化，此时 this 已指向实例

ES6 类方法和事件处理器中的 `this` 绑定陷阱

类中定义的方法默认是普通函数，this 取决于调用方式，不是定义位置。DOM 事件处理器尤其危险：

class Counter {
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count++;
  }
  render() {
    const btn = document.getElementById('btn');
    btn.addEventListener('click', this.increment); // ❌ this 指向 btn 元素
  }
}

修复方式有三种，各有利弊：

在 render 中用 bind：btn.addEventListener('click', this.increment.bind(this)) —— 每次渲染都新建函数，不推荐
使用箭头函数字段：increment = () => { this.count++; } —— 最常用，但会为每个实例创建独立函数
在事件回调中手动绑定：btn.addEventListener('click', () => this.increment()) —— 清晰，但每次点击都新建箭头函数

真正容易被忽略的是：第三方库（如 Lodash）的 debounce 或 throttle 默认不绑定 this，必须显式传入第三个参数 { leading: true, trailing: true, maxWait: 500 } 并配合 .bind(this) 或用箭头包装，否则 this 依然会丢失。

到这里，我们也就讲完了《JS中this指向及绑定方法解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！