首页 > 文章 > 前端

this指向解析：JavaScript方法全掌握

时间：2026-02-06 21:37:39 247浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《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学习网公众号，带你了解更多关于的知识点！

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