首页 > 文章 > 前端

this指向详解，JavaScript方法全解析

时间：2026-01-11 17:53:53 129浏览收藏

珍惜时间，勤奋学习！今天给大家带来《this指向如何改变，JavaScript方法大全》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

JavaScript中this指向由调用上下文决定，可通过call/apply/bind显式绑定、箭头函数词法继承、对象方法隐式绑定、new构造函数绑定四种方式控制。

如何改变this的指向_Javascript有哪些方法

在 JavaScript 中，this 的指向不是由函数定义时决定的，而是由**函数调用时的上下文**决定的。要改变 this 的指向，核心思路是：**控制函数执行时的调用对象**。以下是几种常用且实用的方法：

1. 使用 call、apply、bind 显式绑定 this

这三个方法都属于函数对象的内置方法，能直接指定 this 指向哪个对象。

call(obj, arg1, arg2, ...)：立即执行函数，this 指向 obj，参数逐个传入
apply(obj, [arg1, arg2, ...])：立即执行函数，this 指向 obj，参数以数组形式传入
bind(obj, arg1, arg2, ...)：返回一个新函数，this 永久绑定为 obj，不立即执行（常用于事件回调、定时器等场景）

例如：

const obj = { name: 'Alice' };
function greet(age) { console.log(`I'm ${this.name}, ${age} years old`); }
greet.call(obj, 25); // I'm Alice, 25 years old
greet.bind(obj, 25)(); // 同样输出

2. 使用箭头函数自动继承外层 this

箭头函数没有自己的 this，它会沿作用域链向上查找，使用定义时所在上下文的 this 值（即“词法绑定”）。

适用于解决回调中 this 丢失问题，比如定时器、事件监听、Promise 回调等：

const obj = {
  name: 'Bob',
  sayHi() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`); // 正确输出 Bob
    }, 100);
  }
};

注意：不能用 call/apply/bind 改变箭头函数的 this，因为它无视这些调用方式。

3. 通过对象方法调用隐式绑定 this

当函数作为对象的属性被调用时（obj.method()），this 自动指向该对象。

这是最自然的 this 绑定方式，但要注意避免“函数赋值后丢失 this”：

const obj = {
name: 'Charlie',
getName() { return this.name; }
};
const fn = obj.getName;
fn(); // undefined —— this 指向全局或 undefined（严格模式）
// 修复方式：
const fn2 = obj.getName.bind(obj);
const fn3 = () => obj.getName();
const fn4 = obj.getName.bind(obj);

4. 使用 new 调用构造函数绑定 this

用 new 调用函数时，会创建一个新对象，this 指向这个新实例。

这是面向对象编程中初始化实例属性和方法的基础机制：

function Person(name) {
this.name = name;
this.say = function() { console.log(`I'm ${this.name}`); };
}
const p = new Person('David');
p.say(); // I'm David

此时 this 不可被外部 call/bind 等修改（除非手动覆盖原型上的方法）。

终于介绍完啦！小伙伴们，这篇关于《this指向详解，JavaScript方法全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

前往漫画官网入口并下载 ➜